L7-DOM基础

Posted 2020-06-28

今天学习了DOM，它是javascript组成（ECMAScript 、DOM、 BOM）部分之一。

DOM是什么？

DOM：文档对象模型（Document Object Model，简称DOM）。具有操作html页面的能力。

DOM节点

　　childNodes 　　nodeType

childNodes获取到的节点包含：文本节点和元素节点。其中获取到的文本节点和元素节点的混合体，而其中文本节点是没有添加删除属性等的操作，如果我们要对元素节点进行属性操作，必须要通过另外一个属性nodeType配合使用。（扩展：nodeType==3是文本节点，nodeType==1是元素节点，我们就可以对其进行if判断，来对我们的元素节点进行操作）。

children

有没有直接获取元素节点的方法呢？其实是有的，接下来就是我们要介绍的children，它就是只获取元素节点的一个方法。

parentNode

parentNode是获取元素节点的父节点。

例子：点击链接，隐藏整个li

<ul id = "ul1">

<li>aaa<a href = "javascript:;">隐藏</a></li>

<li>bbb<a href = "javascript:;">隐藏</a></li>

<li>ccc<a href = "javascript:;">隐藏</a></li>

</ul>

var oUl = document.getElementById("ul1");

var aLi  = oUl.getElementsByTagName("a");

for(var i = 0; i < aLi.length; i++){

aLi[i].onclick = function(){

aLi[i].parentNode.style.display = "none";

}

}

offsetParent

绝对定位的元素是根据谁定位的？绝对定位的元素是根据他定位的父级元素定位，如果它的直接父级没有定位，那么它会往上找，直到找到，那么就是他的父级元素。我们可以同offsetParent来快速查找出他的父级定位元素。

获取首尾节点

firstChild　　　　　　　lastChild　　　　　　　　　　　//使用在IE6-8版本的

firstElementChild    　 lastElementChild　　　　　　// FF Chrome IE9 

获取兄弟节点

nextSibling　　　　　　previousSibling　　　　//使用在IE6-8版本的

nextElementSibling　　perviousElementSibling  　　// FF Chrome IE9 

操作元素属性的方法

　　第一种：obj.style.display = ‘block‘

　　第二种：obj.style[‘display‘] = ‘block‘

　　第三种：DOM方式

DOM操作元素节点

　　获取：getAttribute（名称）

　　设置：setAttribute（名称，值）

　　删除：removAttribute（名称）