DOM基础操作应用

DOM——基础

1. 概念：全称：Document Object Model，即文档对象模型用来操作web页面，窗口，文档。

DOM节点：

childNodes子节点：

明明只有两个li，却说有5个子节点，原因是，他把<ul>和每个<li>之间的空白也当成了节点，因为,但是在IE6-8中显示的是2。

当我们需要改变li中的背景颜色，，这样写是不会改变的 ，因为文本节点没有style属性。

要解决这个问题就需要nodeType

 

用nodeType第一次会跳出3，再刷新一次会跳出1，这是因为：

但其实我们改变背景颜色需要的只是元素节点，不需要文本节点，所以用if来筛选：

另外还有一种非常方便的节点就是children,它不会把文本节点算进去，也可以直接设置style属性。

这个子节点还有一个很重要的概念就是它只算第一层的，如果li下面还有<span>之类的，span不算是子节点。

parentNode父节点：

对于这个ul来说，body就是它的父节点

 

现在来做一个小实例：点击链接，隐藏整个li

 

点击隐藏时能让这些文字隐藏:

firstChild是指第一个子节点，但是它的兼容性和childNode一样，只适用于IE6-8，所以要改成firstElementChild适合该版本浏览器，如果要让它适用于所有浏览器，就要用if..else：

操作元素属性：

第一种：oDiv.style.display=’block’

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

第三种：Dom方式

1. DOM方式操作元素属性：

获取：getAttribute(名称)

设置：setAttribute(名称，值)

删除：removeAttribute(名称)

 

Dom操作应用

创建Dom元素

例子：点击按钮就创建一个li，

总结：如果想要给页面插入一个新的元素，需要两个步骤：1.需要用creatElement来创建元素  2.创建好之后还要用appendChild来把插入到相应的父级下面去。

但是这样创建出来的li是空的，没有文字，这时候就需要用到innerHTML

但是这样又出现了新的问题，新创建的li是在下面的，比如在微博上，你发了一条微博，但是最新发的微博却是在最后一页的，那肯定不行，所以就需要用到插入元素功能了。

 

 

插入元素

insertBefore（节点，原有节点）   在已有元素前插入-即倒叙插入

 

 

删除元素