DOM的节点操作

节点类型

DOM节点分为5种类型：文档节点、元素节点、属性节点、文本节点、注释节点。

元素节点

关于元素节点有三个属性：

nodeType（显示节点类型，1为元素节点，2为属性节点，3为文本节点）。

nodeName（以大写形式显示节点名字）。

nodeValue（显示节点的值）。

<a href="baidu.com">百度</a>
<script>
    // 元素节点
    var a = document.getElementsByTagName("a")[0];
    console.log(a.nodeType);   // 1为元素的节点
    console.log(a.nodeName);   // A
    console.log(a.nodeValue);  // null  因为元素节点没有值
</script>

属性节点

每个元素都有一些自己的属性，这些属性称之为属性节点。getAttributeNode()方法获取属性节点，返回的是属性节点对象；name属性获取属性节点的名字；value获取节点的值；getAttribute()方法获取属性节点值，返回的是属性值。

<a href="baidu.com">百度</a>
<script>
    // 属性节点
    // 得到属性值的（两种方法）
    var href = a.getAttributeNode("href");
    console.log(href);   // href="baidu.com"
    console.log(href.nodeType);  // 2  显示节点的类型
    console.log(href.nodeName);  // href  
    console.log(href.nodeValue)  // baidu.com  节点的值

    // 最新的方法  只有属性节点可以这样用
    console.log(href.name);  // href
    console.log(href.value)  // baidu.com

    // getAttribute()直接得到属性值
    console.log(a.getAttribute("href"));  // baidu.com
</script>

文本节点

标签中的文本内容就是节点。通过firstChild属性来获取标签元素的子节点。

<a href="baidu.com">百度</a>
<script>
    // 文本节点
    var txt = a.firstChild;   
    console.log(txt.nodeType);   // 3
    console.log(txt.nodeName);   // #text
    console.log(txt.nodeValue);   // 百度
</script>

通过标签名获取节点

对于同一类的许多标签元素，我们可以使用getElementsByTagName()方法。

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    // 获取所有的li元素
    var lis = document.getElementsByTagName("li");
    // 打印第一个li元素
    console.log(lis[0]);
    // 打印最后一个元素
    console.log(lis[lis.length-1]);
</script>

getElementsByTagName()方法得到了页面中的所有<li>标签，然后通过数组下标取出集合中的第一个和最后一个元素。

通过name属性值获取节点 

通过表单的name属性值来获取到指定的<input>标签元素，通过document对象的getElementByName()方法接收一个name值即可。

<form action="">
    <input type="text">
    <input type="password">
    <input type="number">
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女
</form>
<script>
    // 获取name为sex的元素
    var sex = document.getElementsByName("sex");
    console.log(sex);
</script>

通过层级关系获取节点

子节点

一个节点可以有一个或多个子节点。childNodes属性用于获取父节点的所有子节点；firstChild属性获取父节点的第一个子节点；lastChild属性获取父节点的最后一个子节点。

childNodes()

<div id="content">
    <p>张三</p>
    <p>李四</p>
    <p>王五</p>
</div>
<script>
    // 获取父节点的所有子节点   childNodes  把空白符、回车、换行也算做了子元素
    var div = document.getElementById("content");
    var child = div.childNodes;
    console.log(child.length);   // 节点个数为7
    console.log(child);    // NodeList(7) [text, p, text, p, text, p, text]
</script>

children()

<div id="content">
    <p>张三</p>
    <p>李四</p>
    <p>王五</p>
</div>
<script>
    // 获得所有子元素节点  children   只返回有用的东西
    var div = document.getElementById("content");
    var children = div.children;
    console.log(children.length);   // 节点个数为3
    console.log(children)    // HTMLCollection(3) [p, p, p]
</script>