How to use Dom attributes

This time I will bring you how to use Dom attributes, and what are the precautions when using Dom attributes. The following is a practical case, let's take a look.

1. The three cores of javascript

1. Grammar standard of ECMAScript js

2.DOM Document object Model Document Object Model provides methods that allow js to operate html tags

3.BOM Browser Object Model Browser Object Model provides methods that allow js to operate browsers

Note: 1. The biggest boss in js is window, document is just an object under window

1. document.documentElement This thing can be obtained from html

                document(在文档里，document是老大)
                       |
                      html
                      /  \
                     /    \
                    /      \
                   body    head
                   /       / | \
                  /       /  |  \
                 /       /   |   \
               / | \   meta title  style...
              /  |  \
             /   |   \
            p  p   ul...
            /
          /
          a

2. DOM attributes

js ---> DOM --> html

js operates html tags through DOM

1. childNodes returns all child node objects under the current object, and will return text nodes

Note: Only elements will be returned under ie8 Node

1. nodeType returns the node type, element node returns 1, text node returns 3 CommentsNode returns 8

2. children Returns all child element nodes under the object, and there are no compatibility issues

3. firstChild returns the first child node, which behaves the same as childNodes in IE8

1. lastChild returns the last child node, the same as above

1. firstElementChild returns the last element node, not compatible with IE8

1. nextSibling The next sibling node in mainstream browsers may get nodes other than element nodes. In IE8, only element nodes will be returned. If not, Return null

2. previousSibling The previous sibling node is the same as above

3. nextElementSibling If there is no next sibling element node, return null. Incompatible with IE678

1. previousElementSibling Same as above

2. ##parentNode * Returns the parent node without compatibility

3. offsetParent Returns the positioning parent. If neither is found, it will finally return to the body. There is no compatibility issue

　13.nodeName Returns the constructor of the label Tag name

Capital letters

3. Some methods of DOM

createElement('p')

This is the tag

To create a new element node, you need to accept a parameter, and the parameter is the label that needs to be created.

CreateTextNode（）

Create a new text node

createComment（）

Create a new comment node

Node operation

Add element node

1. Parent.appendChild(child node)

Add the child node to the parent node after all the child element nodes of the parent

Append a node

2. Parent.insertBefore(child node, specified child node)

Add to the front of the specified node

1. Parent.removeChild (node ​​that needs to be deleted)

1. Clone node cloneNode

Clone node, clone parent.cloneNode()

The function receives a parameter, which is a Boolean value. The default is false, shallow copy, true for deep copy

Shallow copy: only copy the label

Deep copy: Copy the in-line information of some tags related to this tag object, and the custom attributes in js will not be copied.

These are my notes on dom learning. If it can help you, I will be very happy.

# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JavaScript Optimizing DOM

##How to implement two-way data binding in WeChat applet
How to use JavaScript strings

The above is the detailed content of How to use Dom attributes. For more information, please follow other related articles on the PHP Chinese website!