公司内部的一篇关于dom方法的分享
第一部分 dom
node类型
nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：
|
元素类型
|
NodeType |
|
元素
|
1 |
|
属性
|
2 |
|
文本
|
3 |
|
注释
|
8 |
|
文档
|
9 |
if (someNode.nodeType == 1) { //适用于所有浏览器
...
}
nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
注释：nodeName 始终包含 HTML 元素的大写字母标签名。
if (someNode.nodeType == 1) {
value = someNode.nodeName //nodeName的值是元素的标签名
}
nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
每个节点都有一个childNodes属性，其中保存着一个NodeList对象。（NodeList是一个类数组对象，不是Array的实例）
someNode.firstChild =someNode.childNodes[0] = someNode.childNodes.item(0)
someNode.lastChild = someNode.childNodes[someNode.childNodes.length-1]
hasChildNodes() //检测有没有子节点
var returnNode = someNode.appendChild(someNode.firstChild) //在第一个子节点后append
insertBefore(newNode, null) //和append()方法一致
insertBefore(newNode, someNode.firstChild) //在特定位置添加节点
replaceChild(newNode, someNode.firstChild) //替换节点
removeChild(someNode.firstChild) //移除节点
replaceChild(newNode, someNode.childNodes[someNode.length-2]) //删除倒数第二个元素
cloneNode() //接收一个参数，true（为深复制，复制节点以及子节点树），false（只复制节点本身)
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
var deepList =mylist.cloneNode(true)
console.log(deepList.childNodes.length) //3(ie<9) 或7（其他浏览器）
[text, li, text, li, text, li, text]
console.log(deepList.children.length) //3
[li, li, li]
console.log(deepList.childNodes.length) //
var shallowList =mylist.cloneNode(false)
console.log(shallowList .childNodes.length) //0
IE9之前的版本不会为空白符创建节点,cloneNode()方法不会复制dom节点的javascript属性,例如事件处理，但ie有bug，建议复制前移除事件
Document类型
var allElements = document.getElementByTagName("*") //所有元素
document.forms document.images
document.links //带有href特性的<a>元素
Element类型
1.HTML元素
var div= document.getElementById("myDiv")
console.log(div.id)
console.log(div.className)
console.log(div.title)
console.log(div.dir)
2.取得特性
getAttribute() setAttribute() removeAttribute()
<div id="myDiv" align="left" my_special_attribute="hello!"
console.log(div.my_special_attribute) //undefined (ie除外)
div.mycolor = "red"
console.log(div.getAttribute("mycolor")) //null （ie除外）
DOM扩展
选择符
querySelector() querySelectorAll() //ie8+
matchesSelector() //接受参数，css选择符，如果调用元素与该选择符匹配，返回true，否则，返回false p288页
与类相关的扩充
getElementsByClassName() //ie9+ 在document对象上调用始终会返回与类匹配的所有元素，在元素上调用改方法只会返回后代元素中匹配的元素
//删除"disabled"类
div.classList.remove("disabled")
//添加"current"类
div.classList.add("current")
//切换"user"类
div.classList.toggle("current")
//确定元素中是否包含既定类名
if (div.classList.contains("bd"))
Firefox 3.6+和Chrome
location修改URL的方法
初始url为http://www.baidu.com/wechart/
将url修改为 http://www.baidu.com/#section1
location.hash = "#section1";
将url修改为 http://www.baidu.com/wechart/?q=javascript
location.search= "?q=javascript";
将url修改为 http://www.yahoo.com/wechart/
location.hostname= "www.yahoo.com";
将url修改为 http://www.yahoo.com/mydir/
location.pathname= "mydir";
将url修改为 http://www.yahoo.com:8080//wechart
location.port = 8080;
