day29—JavaScript中DOM的基础知识应用

转行学开发，代码100天——2018-04-14

JavaScript中DOM操作基础知识即对DOM元素进行增删改操作。主要表现与HTML元素的操作，以及对CSS样式的操作。其主要应用知识如下图：

通过对DOM的基本了解，还要通过代码实现对DOM的操作。

1.childNodes + nodeType 与children的区别

    <ul id= "ull">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

通过对ul下li标签（也是本文中节点）获取，比较两者的不同

//子节点
         var oUl = document.getElementById("ull");
         alert(oUl.childNodes.length); // 输出11 ，自动计算了文本元素（空）
         alert(oUl.children.length);   //输出了5 ，不计算空文本，且只计算直接子节点

即childNodes 方法获取的子节点包含了空文本，而children方法获取的子节点不包括空文本，且只是父节点的直接直接点，即如果li节点下有其他元素，输出的结果也为5.

 nodeType 返回节点的类型

如：

for (var i = 0; i < oUl.childNodes.length; i++) {
alert(oUl.childNodes[i].nodeType); //3/1交替出现
}

对于前面的HTML文档结构，循环输出的将是3,1,3,1...

 由此也可以说明，通过childNodes获取到的节点包含了文本元素，即这里的空文本。

若改为children，则

for (var i = 0; i < oUl.children.length; i++) {
alert(oUl.children[i].nodeType);
}

输出的全是1，即全是元素。

因此，可以通过oUl.childNodes[i].nodeType == 1的判断，对元素进行单独操作。

 2.父节点：parentNode与offsetParent

parentNode：获取元素的父节点

如：

    <ul id= "ull">
        <li>afs<a href="javascript:;">隐藏</a></li>
        <li>fdgd<a href="javascript:;">隐藏</a></li>
        <li>3sdfsd<a href="javascript:;">隐藏</a></li>
        <li>24rsdfsd<a href="javascript:;">隐藏</a></li>
        <li>tsdfasga5<a href="javascript:;">隐藏</a></li>
    </ul>

 通过getElementsByTagName("a") 方法获取所有a节点，给a节点添加鼠标点击事件——隐藏。

 通过当前a节点的父节点显示样式设置为“none”实现其整行隐藏。

 //父节点
         parentNode
         var oA = document.getElementsByTagName("a");
         // alert(oUl.parentNode);//body
         alert(oA.length);
         for (var i = 0; i < oA.length; i++) {
             oA[i].onclick = function()
             {
                 this.parentNode.style.display = "none";
             }
         }

 offsetParent :获取绝对定位元素的父节点。如果父节点没有绝对定位，则获取有绝对定位的父节点，直至body。

如下图父子方块

HTML&CSS                    

 

若div1无绝对定位，修改margin时，只是div1移动；若添加绝对定位position：relative时，修改margin时两个盒子相对移动。

绝对定位：

 

相对定位：

 3.首位子节点

firstChild firstElementChild

lastChild lastElementChild

整两个获取子元素的方法有兼容性问题，（在使用时需要使用if语句进行判断）

oUl.firstChild.style.background ="red"; //ie7-ie8
oUl.firstElementChild.style.background = "red";//chrome ie9以上

因此，为了适用于多种浏览器，可以如下修改。

            var oUl = document.getElementById("ull");
            if (oUl.firstElementChild) {
                 oUl.firstElementChild.style.background = "red";//chrome ie9以上    
            }else{
                oUl.firstChild.style.background ="red"; //ie7-ie8
            }

///

其他子元素的操作如此类似。