day29—JavaScript中DOM的基础知识应用
Posted 东易韦
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 }
///
其他子元素的操作如此类似。
以上是关于day29—JavaScript中DOM的基础知识应用的主要内容,如果未能解决你的问题,请参考以下文章
Web前端开发工程师知识体系_29_JavaScript DOM