Details about the attributes of element objects in DOM Based on js

The following small series will give you a detailed explanation of the attribute methods of element objects in the JavaScript-based DOM. I think this is quite good. Now I will share it with you and give you a reference. Let's take a look at the small Editor. in html dom (Document Object Model), each part is a node.

A node is the most basic unit in the DOM structure. Each HTML tag is a node in the DOM structure.

A document is a document node.

All HTML elements are element nodes.

All HTML attributes are attribute nodes.

Text inserted to HTML elements is a text node.

A comment is a comment node.

The most basic Node type is the Node type, and all other types are inherited from the Node. DOM operations are often the most popular part in js, so NodeList causes the most problems. Note: NodeList is 'dynamic '. That is to say, each time you access the NodeList object, a query is run. Although this increases the overhead, however, we can ensure that all newly added nodes can be accessed in NodeList.

All element nodes share common attributes and Methods. Let's take a closer look:

First, let's look at common attributes that are commonly used.

1 element. id: set or return the id of the element.

2 element. innerHTML sets or returns the content of an element, which can contain sub-tags and content in the node.

3 element. innerText: sets or returns the content of the element, excluding the sub-labels and content of the node.

4. Set element. className or return the Class Name of the element.

5 element. nodeName: return the uppercase letter Tag Name of the node.

6 element. nodeType: return the node type of the node. 1 indicates element Node 2 indicates attribute node ......

7 element. nodeValue: return the value of the node. The value of the element node is null.

8 element. childNodes returns the nodeslist object of the child node of the element. nodelist is similar to an array and has the length attribute. You can use square brackets [index] to access the value of the specified index (you can also use item (index) method ). But nodelist is not an array.

9 element. firstChild/element. lastChild returns the first/last child node of the element (including the comment node and text node)

10 element. parentNode: return the parent node of the node.

11 element. previussibling returns the previous node (including the comment node and text node) at the same level as the current node)

12 element. nextSibling returns the next node (including the comment node and text node) at the same level as the current node)

13 element. chileElementCount: returns the number of child elements (excluding text nodes and comment nodes ).

14 element. firstElementChild/lastElementChild returns the first/last child element (excluding text nodes and comment nodes)

15 element. previuselementsibling/nextElementSibling returns the first/second sibling element (excluding text nodes and comment nodes)

16 element. clientHeight/clientWidth: the visible height/width of the returned content (excluding the border, margin, or scroll bar)

17 element. offsetHeight/offsetWidth/offsetLeft/offset/Top return height/width of the element/left offset/right offset relative to the parent element (including border and padding, excluding margin)

18 element. style sets or returns the style attributes of an element ,. Example: element. style. backgroundColor Note: Unlike CSS, the style attribute must be removed from the horizontal bar and the first letter of the second word must be capitalized.

19 element. tagName the Tag Name of the returned element (uppercase)

  
   Title         
Think twice !!!
   
Recommended Practices --> sunflower collection
Script // Add the Demo code var a = document. getElementById ('first _ form'), B = document. getElementsByTagName ('P') [0]; console. log (. id); console. log (. innerHTML); console. log (. className); console. log (. childNodes); console. log (. firstChild); console. log (. lastChild); console. log (. nodeName); console. log (. nodeType); console. log (. nodeValue); console. log (. parentNode); console. log (. clientHeight); console. log (. offsetHeight); console. log (B. nextSibling); console. log (B. nextElementSibling); script  

Browser display result:

Some exclusive attributes

Exclusive attributes refer to those attributes that belong to a specific label. For example, labels have the href and target attributes. Has the src attribute;

Think twice !!!

Script // Add the Demo code of js to script

(All the following js DEMO code is the sample html code in this document)

1 element. appendChild (nodeName) adds a new child node to the element as the last child node and returns the child node. To add a new element to the html dom, you must first create the element and append it to an existing element.

Js DEMO code:

Var a = document. getElementById ('first _ form'); var textnode = document. createTextNode ("select carefully"); a. appendChild (textnode)

2 element. getAttribute (para) returns the specified attribute value of the element node.

Js DEMO code:

Var a = document. getElementById ('first _ form'); console. log (a. getAttribute ('name') // name value output by the console

3 element. getAttributeNode (para) returns the specified attribute node.

Js DEMO code:

Var a = document. getElementById ('first _ form'); console. log (a. getAttributeNode ('name') // name attribute node output on the console

4 element. getElementsByTagName (para) returns a set of all child elements with the specified tag name.

Js DEMO code:

Var a = document. getElementById ('first _ form'); console. log (a. getElementsByTagName ('input') // console output

5 element. hasAttribute (para) If an element has a specified attribute, true is returned; otherwise, false is returned.

Js DEMO code:

Var a = document. getElementById ('first _ form'); console. log (a. hasAttribute ('name') // console output

6 element. insertBefore (insertNode, appointedNode) inserts a new node before the specified child node.

Js DEMO code:

Var a = document. getElementById ('first _ form'); var inputList = document. getElementsByTagName ('input'); var newNode = document. createElement ('input'); var newNode2 = document. createTextNode ('tianma meteor boxing '); var br = document. createElement ('br '); newNode. type = 'Radio '; newNode. name = 'gongfa '; newNode. value = 'tmlxq';. insertBefore (newNode, inputList [2]);. insertBefore (newNode2, inputList [3]);. insertBefore (br, inputList [3]);

7 element. removeAttribute () removes the specified attribute from the element.

Js sample code:

var a=document.getElementById('first_form');a.removeAttribute('name');console.log(a.hasAttribute('name'))

8 element. removeChild () removes child nodes from the element. Although the removed node is not in the document tree, it is still in memory and can be referenced at any time.

Js sample code:

var a=document.getElementById('first_form');    a.removeChild(a.childNodes[3]);

9 element. replaceChild (newNode, replaceNode) replaces the specified node with a new node.

10 element. setAttribute (attrName, attrValue) sets or changes the specified attribute to the specified value.

Js sample code:

var a=document.getElementById('first_form');    a.setAttribute('name','shaolinsi');    console.log(a.name)

11 element. setAttributeNode () modify the specified attribute node

Js sample code:

var a=document.getElementById('first_form');    var attr = document.createAttribute('id');    attr.value='the_first';    a.setAttributeNode(attr);　　　　 console.log(a.id)

12 nodelist. item () returns the node in NodeList that is located under the specified destination.

Js sample code:

var a=document.getElementsByTagName('input')console.log(a.item(2))

The above is a detailed explanation of the attributes and methods of element objects in the js-based DOM provided by xiaobian. I hope you can support PHP ~

For more details about the attributes and methods of element objects in the JavaScript-based DOM, refer to PHP!