Js dom 学习

节点类型

文档节点：

一棵DOM树的顶端是文档节点，它呈现为整个页面（相当于document对象），当需要访问任何元素、属性或文本节点时，都需要通过文档节点来进行导航。（document.）

元素节点

HTML元素描述了HTML页面的结构，需要访问DOM树时，需要从查找元素开始。一旦找到所需的元素，然后就可以根据需要来访问它的文本和属性节点。所以需要先学习访问元素节点的方法，然后再学习如何访问和修改文本及属性值。

属性节点

HTML元素的开始标签中可以包含若干属性，这些属性在DOM树中形成属性节点。

文本节点

当访问这些元素节点时，可以访问元素内部的文本，这些文本保存在其文本节点中。文本节点没有子节点。如果一个元素包含文本和其他子元素，这些子元素并非文本节点的子节点，而是整个容器元素的子节点<p>name<em>fresh</em>figs</p>,父节点为p，子节点为name，<em>fresh</em>，figs。

DOM操作

1访问元素

1.1选择单个元素

getElementById()返回对拥有指定 id 的第一个对象的引用。

querySelector() 使用css选择器，返回第一个匹配的元素。querySelector("li#id1");查询li的id=‘id1’的元素。

1.2选择多个元素

getElementsByClassName();　　选择所有在class属性上使用了特定值的元素

getElementsByTagName();  　　 选择所有使用了指定标记的元素

querySelectorAll（）  　　　　   使用Css选择器来选择所有匹配的元素、

childNodes 　　　　　　　　　  孩子节点数组

1.3在元素节点之间遍历

parentNode      返回当前元素的父节点

previousSibling  返回当前元素的前一个兄弟节点

nextSibling　　返回当前元素的后一个节点

firstChild　　　返回当前元素的第一个子节点

lastChild　　　返回当前袁术的最后一个子节点

在绝大数浏览器，除了IE,都会将元素之间的空白（比如空格或回车）当做文本节点来处理，所以上面的属性（除了parentNode属性）在不同的浏览器中可能会返回不同的元素。所以应该避免使用这些DOM属性，解决这个问题的一个最受欢迎的方法是使用jquery这样的JavaScript库。

2.操纵这些元素

nodeType   元素节点类型

2.1 访问/更新文本节点

nodeValue

2.2操作HTML内容

innerHTML   访问/更新子元素和文本内容。

textContent  访问元素的文本内容 　　　　<p id="p1">fresh <em>figs</em></p>   document.getElementById("p1").textContent 结果为 fresh figs

innertText  　访问元素的文本内容  最好不要使用，1.firefox不支持，2.遵从css，css规则隐藏了的元素的文本内容获取不到。3、因为innerText考虑到布局规则来判断元素的可见性，它在获取文本内容时的速度要比textContent更慢。

createElement()创建元素节点

createTextNode()创建文本节点

appendChild()　　向元素添加新的子节点，作为最后一个子节点。

removeChild()　　移除节点

insertBefore   方法在您指定的已有子节点之前插入新的子节点   parentNode.insertBefore(newItem,existingItem);

2.3访问或更新属性值

className/id    可以使用它们来获取或更新class和id属性

hasAttribute()是否存在某属性

setAttrubute ()设置元素节点属性

getAttribute()  获取元素节点属性

removeAttribute()删除节点