层次节点——NODE节点

1、html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>node节点</title>

</head>
<body>
    <div id="box" style="color: red">额<em>mi</em></div>
<p>222</p>
</body>
</html>

2、JavaScript

<script>

        window.onload = function () {
            var box = document.getElementById('box');
            var p = document.getElementsByTagName('p');
            alert(box.nodeName);//获取元素节点的标签名，和tagName等价。DIV
            alert(box.nodeType);//输出元素节点的类型值，1属性节点返回1
            alert(p[0].nodeType);//输出元素节点的类型值，1属性节点返回1

        }
    </script>

    <script>

        window.onload = function () {
            var box = document.getElementById('box');
            alert(box.childNodes);//object nodeList
            alert(box.childNodes[0].nodeName);//#text，文本节点没有标签名
            alert(box.childNodes[0]);//object Text,
            alert(box.childNodes[0].nodeType);//3,说明是文本节点
            alert(box.childNodes[0].nodeValue);//额，获取当前文本节点的内容，与innerHTML区别开来

            alert(box.childNodes[0].innerHTML);//undefined,因为第一个节点是文本，是额，额里面的内容没有找到，所以是undefined;

        }
    </script>

3/如果节点是元素节点打印出元素节点四个字+节点名，否则是文本节点打印出文本节点四个字+节点名，属性节点遍历不出来

 var box = document.getElementById('box'),
                    i = 0;           
 for(;i < box.childNodes.length;i++) {
                if(box.childNodes[i].nodeType === 1) {
                    alert('元素节点' + box.childNodes[i].nodeName);
                }else if(box.childNodes[i].nodeType === 3){
                    alert('文本节点' + box.childNodes[i].nodeValue);
                }
            }

4、innerHTML与nodeValue改变内容

var box = document.getElementById('box');
box.innerHTML = 'nihao';//额mi换成了nihao
box.nodeValue = 'nihao';//没有报错但是也没有赋值

box.childNodes[0].nodeValue = 'nihao';//nihaomi,只有这样才是正确的

5、