js原生的节点操作API

// yi获取元素节点
//一 ：过id的方式( 通过id查找元素，大小写敏感，如果有多个id只找到第一个)
document.getElementById('div1');

// 通过类名查找元素，多个类名用空格分隔,得到一个HTMLCollection(一个元素集合，有length属性，可以通过索引号访问里面的某一个元素)
var cls = document.getElementsByClassName('a b');
console.log(cls);

// 通过标签名查找元素 返回一个HTMLCollection
document.getElementsByTagName('div');

// 通过name属性查找，返回一个NodeList(一个节点集合，有length属性，可以通过索引号访问)
var nm = document.getElementsByName('c');
console.log(nm);

// 获取所有form标签(得到一个HTMLCollection集合）
var form = document.forms;

// html5新加标签（ie8+）
// document.querySelector(); // 返回单个node，如果有多个匹配元素就返回第一个
// document.querySelectorAll(); // 返回一个nodeList集合

// 创建元素，只是创建出来并未添加到html中，需要与appendChild 配合使用
var elem = document.createElement('p');
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新创建的节点';
document.body.appendChild(elem);

// 创建文本节点 createTextNode
var txt = document.createTextNode('我是文本节点');
document.body.appendChild(txt);

// 克隆节点（需要接受一个参数来表示是否复制元素）
var form = document.getElementById('test');
var clone = form.cloneNode(true);
clone.id = 'test2';
document.body.appendChild(clone);

// 3 节点修改API
//节点修改APi有两个特点
// 1 不论新增还是替换节点，如果原本就在页面上，就会被替换
// 2 修改之后节点本身绑定的事件不会小时

// 1 appendChild ()
// 用法是： parent.appendChild(child)
// 会将child节点添加到parent里的最后面，如果子节点原本就存在，会移除原节点，添加新节点
// 到最后，但是事件会保留

// 2 insertBefore()
// 用法是 parent.insertBefore(newNode,refNode);
// refNode 是必须传的 不传会报错
// 如果 refNode 是undefined 和null 就会将新节点传入到parent节点的最后

// 3 removeChild()
// 用法是：parent.removeChild(child)
// 如果删除的不是父元素的子节点会报错
// var deleted = parent.removeChild(child)
// deleted 可以继续引用节点 ，被删除节点依然存在与内存中

// 4 replaceChild()
// 用法是：parent.replaceChild(newChild, oldChild);

// 4 节点的关系APi
// 1 父关系API
// parentNode 父节点
// parentElement父元素

// 2 子关系API
// children 子元素
// childNodes 子节点
// firstElementChild 第一个子元素
// firstChild 第一个子节点
// lastElementChild 最后一个子元素
// lastChild 最后一个子节点

// 3 兄弟关系的API
// previousSibling 节点的上一个兄弟节点
// previousElementSibling 节点的上一个兄弟元素（ie9以下不支持）
// nextSibling 节点的下一个兄弟节点
// nextElementSibling 节点的下一个兄弟元素（ie9以下不支持）

// 5 节点属性API
// setAttribute(name,value) 给元素设置属性
// getAttribute(name) 获取元素属性

// 6 直接修改元素的样式
elem.style.color = 'red';
elem.style.setProperty('font-size', '16px');
elem.style.removeProperty('color');

// 7 动态添加样式
var style = document.createElement('style');
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
document.head.appendChild(style);

一、nodeName 属性: 节点的名称，是只读的。<br/>

1. 元素节点的 nodeName 与标签名相同<br/>
2. 属性节点的 nodeName 是属性的名称<br/>
3. 文本节点的 nodeName 永远是 #text<br/>
4. 文档节点的 nodeName 永远是 #document<br/>

二、nodeValue 属性：节点的值<br/>

1. 元素节点的 nodeValue 是 undefined 或 null<br/>
2. 文本节点的 nodeValue 是文本自身<br/>
3. 属性节点的 nodeValue 是属性的值<br/>

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:<br/>

元素类型 节点类型<br/>
！元素 1<br/>
属性 2<br/>
！文本 3 空格也是返回3<br/>