js基础-节点获取Element

107 阅读1分钟
<div id="box"><input type="text" value="textVal">
        <h1 id="h1">早上好,同学们</h1>
        <h3>你们昨晚睡得好吗?</h3>
    </div>
    
        /* ☆元素的属性是不包括换行#text的 */
        /* ☆元素属性 ie8及以下不支持 */
        /* firstElementChild	返回节点的第一个子节点 */
        var box = document.getElementById('box');
        /* console.log(box.firstElementChild); */
        /* lastElementChild	返回节点的最后一个子节点 */
        /* console.log(box.lastElementChild); */
        /* nextElementSibling	下一个节点 */
        /* previousElementSibling	上一个节点 */
        /* let h1 = document.getElementById('h1');
        console.log(h1.previousElementSibling); */
        /* 兼容写法 */
        /* firstChild IE/firstElementChild firefox  */
        /*  let p1 = box.firstChild.nextSibling;
         let p2 = box.firstElementChild; */

        /*  var p = box.firstElementChild||box.firstChild;
        
        console.log(p);  */
        /*
         节点类型	NodeType值
    元素element	1
    属性attr 	  2
    文本text	 3
    注释comments	 8 
    文档document	 9

    nodeName:节点名称
nodeValue:节点值
nodeType:节点类型

        */
        /* console.log(box.childNodes); */