JS原生DOM总结

DOM

参考

Node 是一个构造函数

doucment instanceof Node

节点的三个属性

1. nodeType
2. nodeName
3. nodeValue

重要的三种节点

1. 元素节点 (xx.tagName == xx.nodeName)
2. 属性节点
3. 文本节点
   

   * 处为 <div class = "test">123</div>

<div class = "test">123</div>
1. 元素节点
nodeType -> 1
nodeName --> "DIV"
nodeValue -> null
2. 属性节点 (~.getAttributeNode("class") || ~.attributes[idx])
nodeType -> 2
nodeName -> "class"
nodeValue -> "test"
3. 文本节点 (~.firstChild)
nodeType -> 3
nodeName -> "#text"
nodeValue -> "123"

节点的层次

[ 注意 ] 换行符号算一个空的文本节点

操作节点

p = parentNode; xx=待操作节点

1. hasChildNodes() p.hasChildNodes() // true || false
2. appendChild() p.appendChild(xx)
3. insertBefore() p.insertBefore(xx, 某节点)
4. replaceChild() p.replaceChild(xx, 某节点)
5. removeChild() p.removeChild(xx)
6. cloneNode() p.cloneNode(true || false) // 深复制,浅复制
7. normalize() 未知

查找元素

1. document.getElementById()
2. document.getElementsByTagName()
3. document.getElementsByClassName()
4. document.getElementsByName()
5. var html = document.documentElement
6. var body = document.body

document其他

1. document.URL
2. document.domain
3. document.title

// 实现网站标题滚动效果
var text=document.title
var timerID
function newtext() {
            clearTimeout(timerID)                  
            text=text.substring(1,text.length)+text.substring(0,1)
            document.title = text;console.log(text);
            timerID = setTimeout("newtext()", 100)
};
newtext()

Element类型 (元素节点)

创建元素

document.createElement() // 参数为tagName , e.g. "div"

属性

1. xx.tagName if(ele.tagName.toLowerCase() == "div"){// 适用HTML和XML}
2. xx.id
3. xx.className
4. xx.title
5. xx.style 返回对象 xx.style.cssText = "color:red" xx.style.color = "red"
6. xx.removeAttribute()
7. xx.setAttribute() 自定义属性不能用此方法设置
8. xx.getAttribute() 一般取自定义属性时才用

xx.getAttribute()的注意事项  (IE7中和IE8中返回的就不同)
1. xx.style  与 xx.getAttribute("style")不同,
    xx.style返回对象 xx.style.fontSize = "18px"; 
    xx.getAttribute("style") 返回字符串
2. xx.onclick 与 xx.getAttribute("onclick")不同
    xx.onclick返回js函数
    xx.getAttribute返回字符串
// 举例添加自定义属性data-index = "1"    
// dom的属性节点的操作, 都是字符串
xx.setAttribute("data-index","1");  // 能在html中看见
xx.getAttribute("data-index") // "1"
// dom对象, typeof xx --> object, 本质是给object添加属性
xx["data-index"] = 1
xx["data-index"]   // 1
[总结]: 
1. 自定义属性应该用getAttribute或setAttribute读写
2. 实际工作中用jq的$.data()方法