DOM

Document Object Model 用对象的方式来描述html元素， API规范 包含了DOM Core DOM HTML DOM
Style Dom Event

节点操作

节点遍历

.parentNode
.firstChild
.lastChild
.previousSibling //前一个兄弟节点
.nextSibling //后一个兄弟节点

节点类型

ELEMENT_NODE //元素节点
TEXT_NODE //文本节点

元素节点遍历

p.firstElementChild // 无法遍历到文本节点
 .lastElementChild
 .nextElementSibling 
 .previousElementSibling

获取节点

getElementById()
getElementsByTagName()
//获取的节点是动态的，会实时改变
getElementsByClassName()
    // IE678 不支持  写一个兼容函数
    function getElementsByClassName(root, className){
        if(root.getElementsByClassName){
            return root.getElementsByClassName(className);
        }else{
            var elements = document.getElementsByTagName('*');
            var result = [];
            for(var i = 0, element; element = elements[i]; i++){
                if(hasClassName(element, className)){
                    result.push(element)
                }
            }
            return result;
        }
    }

querySelector/All()
获取的list是静态的，节点改变时它无法改变

修改节点

textContent
    user.textContent = "kash"; // IE9不支持

innerText
  // firefox不支持

创建节点

创建Element节点
    document.createElement()
创建Text节点
    document.createTextNode()

插入节点

appendChild()
insertBefore()
    ul.insertBefore(li, ul.firstBefore);

删除节点

n.parentNode.removeChild(n);

替换节点

n.parentNode.replaceChild(target, n);

innerHTML

内存泄露
安全问题

总结

属性操作

每个html属性对应DOM属性

property accessor 属性访问器

//读取属性
<div>
    <label for="username">用户名：</label>
    <input id="username" type="text" class="u-text">
</div>
input.className(); //u-text
input["id"] //username

//写入属性
input.value = 'www.XXX.com';
input.disabled = true;
//通用性差，扩张性差，好处:取到的都是实用对象

getAttribute/setAttribute

var attribute = element.getAttribute(attributeName);

<div>
    <label for="username">用户名：</label>
    <input id="username" type="text" class="u-text">
</div>
input.getAttribute("class"); //"u-text";
input.setAttribute('value', 'wwww.xxx.com');
input.setAttribute("disabled","")//默认为true
//如果属性出现Boolean,那肯定是true
// 获取到的仅字符串，通用性好

样式操作

更新样式

 1.一种是直接操作
    element.style.color = "red";
        更新一个属性需哟一跳语句
        不是我们熟悉的css
    element.style.cssText = "color:red";
        样式混在逻辑中

2.另一种更新class
    element.className += "";
    一次性更新很多的样式(类似于换肤)
        更换样式表:把需要更换的样式分离 
        element.href = ".css"

获取样式

element.style.color //只能获取到内嵌样式
window.getComputedStyle(element).color //IE9不支持