文档对象DOM的操作及使用

Dom对象是什么？

DOM对象就是每次你打开浏览器后，进入一个网址时浏览器获取到的HTML文本内容，当浏览器获取到HTML文本内容时，会将其内容以DOM对象的形式缓存到内存中，这时你便可以对DOM对象进行任何的操作及获取了。以下是学习到的javascript操作DOM对象的学习及总结：

一、DOM树节点分为四大类：

（1）文档节点

文档节点：doucment，Dom树最顶层的节点

（2）元素节点

包括：html、head、title、body、head、h1-h6、div、span等

（3）属性节点

包括：属性和方法、id 、class

（4）文本节点

包括：text

二、访问Dom树节点

（1）返回单一元素节点有2种方法：

getElementById、querySeletor

示例：

//获取id=one的元素节点
var firstItem = document.getElementById('one');
//获取li元素节点
var firstItem = document.querySeletor('li');
//获取id=one的li元素节点
var firstItem = docuemt.querySeletor('li#one');

（2）返回一个或多个元素节点

getElementsByClassName
getElementsByTagName
querySelectorAll

示例：

//获取class='hot'的元素节点
var hotItem = document.getElementsByClassName('hot');
//获取li元素节点，返回的是nodeList数组
var liItems = document.getElementsByTagName('li');
//获取li元素节点，返回的是nodeList数组
var liItems2 = document.querySelectorAll('li');
//获取class属性名为hot的li元素节点，返回的是nodeList数组
var nodeItems = document.querySelectorAll('li.hot');

（3）元素节点间的遍历

　　1）父子节点   

　　parentNode   知道子节点，查找父亲节点

　　2）兄弟节点

　　　previousSibling　　查找相邻兄弟节点的上一个节点

           nextSibling    查找相邻兄弟节点的下一个节点

　　   previousElementSibling    查找上一个元素节点（注意：只能是元素节点）

　　nextElementSibling  查找下一个元素节点（注意：只能是元素节点）
 　　3）前后节点
　　　firstChild    查找第一个节点

   　　lastChild    查找最后一个节点

　　firstElementChild    查找第一个元素节点

　　lastElementChild    查找最后一个元素节点

三、操作Dom树节点

（1）新增元素节点　　createElement()

（2）新增文本节点       createTextNode()

（3）将元素节点/文本节点，追加到现有节点后     appendChild()

（4）将元素节点/文本节点，添加到元素节点开始处   insertBefore()

示例：

//使用createElement() createTextNode() appendChild()在two上进行追加节点内容
var itemTwo = document.getElementById("two").lastChild;
var newElement_em = document.createElement("em");
var newEmContent = document.createTextNode("123");
newElement_em.appendChild(newEmContent);

//使用insertBefore方法，在元素节点前插入新元素
var ulItem = document.getElementsByTagName("ul")[0];
var newLiItem = createElement("li");
var newContent = createTextNode("这是新增的内容")
newLiItem.appendChild(newContent);
ulItem.insertBefore(newLiItem,ulItem.firstChild);

 四、操作属性节点

获取属性值   getAttribute()

检查元素节点是否包含特定属性   hasAttribute()

设置属性值   setAttribute()

从元素节点移除属性  removeAttribute()
   

五、获取/更新元素/文本内容

获取元素内容   

innerHTML

获取文本内容

nodeValue
textContent
innerText

修改文本节点内容

nodeValue="修改的值"
textContent="修改的值"

修改元素节点内容
innerHTML="修改的元素内容"

完结.