2018-07-17课堂笔记(DOM文档对象模型)

        <div>
            你好 世界
            <p>你好</p>
            <ul class="menu">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <a href="www.baidu.com">百度</a>
        <div id="div1">
            你好
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        </div>
    </body>
    <script>
        var a=document.getElementsByTagName('a')[0]
        var div=document.getElementsByTagName('div')[0]

返回的数值相对应着,1为元素节点,2为属性节点,3为文本节点

    console.log(a.nodeType)//返回数值

当前选中的这个元素节点的标签名称并以大写的方式返回

        console.log(div.nodeName)//返回大写的标签名称(会返回DIV)

div.nodeValue获取的是当前的这个div,而并不是它里面的文本节点,当前这个div的第一个子节点才是nodeValue想要获取的文本节点.
需要加一个firstChild属性来帮助他获取标签里面的文本节点(firstChild的意思是获取当前元素的第一个子节点),(如图所示)

        console.log(div.nodeValue)//null   他获取的是元素节点而不是文本节点
        console.log(div.firstChild.nodeValue)//返回节点的文本值,可读可写(需要获取里面的文本节点)(firstChild获取它里面的第一个节点)

这一个属性的意思是说返回你当前选中的这个元素节点的里面的所有文本,包括他的子标签里面的文本,但是他并不返回标签.
但是如果你要是在里面加入内容的话(如图第二行所示),他会把标签也变成文本来显示

        console.log(div.textContent)//返回当前节点和他所有后代节点的文本.忽略标签.
        console.log(div.textContent="<p>我是p</p>")//这种情况直接把标签当做文本

这个属性是返回当前节点的下一个兄弟节点(兄弟节点所指的是和他同级并且在他的下面),如果他们之间有一个回车的话,系统会自动认定这个回车就是他的下一个兄弟节点,因为回车算是一个换行符,也是一种文本节点

        console.log(div.nextSibling)//返回当前节点的下一个兄弟节点(和兄弟节点之间不能有东西 以及回车,因为回车也算是一种文本节点,)

这是种遍历的方法,但是我这有一点没听懂,待我问过我大哥再来回答{抱拳}

        var el=document.getElementById('div1').firstChild
        while(el!==null){
            console.log(el.nextSibling)
            el=el.nextSibling
        }
        console.log(el)
  </script>
</html>