js - Element Type (d) of the DOM

The DOM Element type

Element type used to represent XML or HTML elements, provides a tag name for the element, the child nodes and property access.

feature:

nodeType value 1.
nodeName value element tag name.
nodeValue is null.
parentNode probably Document or Element

Gets the tag name tagName and nodeName:

var d=document.getElementById('myDiv');
        alert(d.tagName); // DIV,HTML中的标签名全部为大写，XML中标签名与源码一致
        alert(d.nodeName==d.tagName); // true

Compare with the tag name is the best transformation consistent capitalization

if(element.tagName.toLowerCase()=="div")

1.HTML element

Each HTML element has characteristics:

id: uniquely identifies the element in the document
title: Additional information about the elements
```
<p title="p标签">www</p>
```

## DOM types of Element

Element type used to represent XML or HTML elements, provides a tag name for the element, the child nodes and property access.

feature:

nodeType value 1.
nodeName value element tag name.
nodeValue is null.
parentNode probably Document or Element

Gets the tag name tagName and nodeName:

var d=document.getElementById('myDiv');
        alert(d.tagName); // DIV,HTML中的标签名全部为大写，XML中标签名与源码一致
        alert(d.nodeName==d.tagName); // true

Compare with the tag name is the best transformation consistent capitalization

if(element.tagName.toLowerCase()=="div")

1.HTML element

Each HTML element has characteristics:

id: uniquely identifies the element in the document
title: Additional information about the elements
```
<p title="p标签">www</p>
```
lang: language code element content
dir: language direction

className: characteristics should be class

<div class="div1" id="divc">颜色</div>
...
var dc=document.getElementById('divc');
  dc.className="div2";

...
.div1{
          color:pink;
      }
.div2{
          color:yellow;
      }

1566354606981 1566354621421

2. Obtain properties

getAttribute (), setAttribute (), removeAttribute () these three methods. Can be used for any features

<div id="myDiv" class="div3"  myarrt="haha">dd</div>
...
    var div=document.getElementById('myDiv');
    alert(div.getAttribute("id"));//myDiv
    alert(div.getAttribute("class"));//div3   这里不要用className
    alert(div.getAttribute("lang"));//null
    //自定义属性
    alert(div.getAttribute("myarrt"));//haha

Property names are not case sensitive.

Custom properties may in some browsers do not exist.

3. Set properties

setAttribute () takes two parameters: attribute name to be set and values

<div id="changDiv" class="div1">change</div>
...
var div=document.getElementById('changDiv');
        div.setAttribute("class","div2");
        div.setAttribute("title","change");

We can also set this value

div.id="some";
div.title="other";

But not add custom properties such as the DOM element, the property does not automatically become the property elements, except for some browsers

div.myColor="blue";
alert(div.getAttribute("myColor"));//null

removeAttribute () method is used to completely remove this attribute.

div.removeAttribute("class")

4.attributes property

lang: language code element content
dir: language direction

className: characteristics should be class

<div class="div1" id="divc">颜色</div>
...
var dc=document.getElementById('divc');
  dc.className="div2";

...
.div1{
          color:pink;
      }
.div2{
          color:yellow;
      }

1566354621421

2. Obtain properties

getAttribute (), setAttribute (), removeAttribute () these three methods. Can be used for any features

<div id="myDiv" class="div3"  myarrt="haha">dd</div>
...
    var div=document.getElementById('myDiv');
    alert(div.getAttribute("id"));//myDiv
    alert(div.getAttribute("class"));//div3   这里不要用className
    alert(div.getAttribute("lang"));//null
    //自定义属性
    alert(div.getAttribute("myarrt"));//haha

Property names are not case sensitive.

Custom properties may in some browsers do not exist.

3. Set properties

setAttribute () takes two parameters: attribute name to be set and values

<div id="changDiv" class="div1">change</div>
...
var div=document.getElementById('changDiv');
        div.setAttribute("class","div2");
        div.setAttribute("title","change");

We can also set this value

div.id="some";
div.title="other";

But not add custom properties such as the DOM element, the property does not automatically become the property elements, except for some browsers

div.myColor="blue";
alert(div.getAttribute("myColor"));//null

removeAttribute () method is used to completely remove this attribute.

div.removeAttribute("class")

4.attributes property

5. Create element

The method of creating elements are:

var newele=document.createElement("标签名")；

Another way to create ways to add property elements into

var newele=document.createElement("<div id=\"newId\"></div>")；

Adding a new element to the number of the document:

document.appendChhild(newele);

6. element child

childNodes attribute of the element contains all of its child nodes, these nodes may be elements, text nodes, comment, or processing instruction. However, different browsers have different.

<ul id="aul">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

In some earlier versions of IE, the above will be considered ul li node has three child nodes, while other browsers think there are seven child nodes, which they believe ul li element includes three nodes and four text nodes

in case

<ul id="aul"><li>item 1</li><li>item 2</li><li>item 3</li></ul>

Like all of the length of time such browsers are returned.

It can be obtained from the above: When we traverse the elements of the child node, the elements in order to accurately node operation, we need to be detected before performing an action type once the node.

var ul=document.getElementById('aul');
        alert(ul.childNodes.length);
        for(var i=0;i<ul.childNodes.length;i++){
            if(ul.childNodes[i].nodeType==1)
            {
                alert(i+":"+ul.childNodes[i].nodeName);
                //1:li
                //3:li
                //5:li
            }
        }