javascript学习之路-01（DOM结构增删改查）

目前在系统的学习javascript，特总结下:

1、增加

document.createElement('元素名');创建新的元素节点
document.createAttribute('属性名');创建新的属性节点
document.createTextNode('文本内容');创建新的文本节点
document.createComment('注释节点');创建新的注释节点
document.createDocumentFragment( );创建文档片段节点

parent.appendChild( element/txt/comment/fragment );向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点
element.setAttributeNode( attributeName );给元素增加属性节点
element.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值


document.createTextNode('新增文本内容');
element.innerHTML='新增文本内容'; 【推荐】
element.innerText='新增文本内容'; 【推荐】

2、删除

parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点
element.removeAttribute('属性名');删除具有指定属性名称的属性，无返回值
element.removeAttributeNode( attrNode );删除指定属性，返回值为删除的属性 

3、修改

parentNode.replaceChild( newChild, existingChild );用新节点替换父节点中已有的子节点
element.setAttributeNode( attributeName );  若原元素已有该节点，此操作能达到修改该属性值的目的
element.setAttribute( attributeName, attributeValue );  若原元素已有该节点，此操作能达到修改该属性值的目的
注意：修改样式 *.style.xxx=vvv或者setAttribute
     修改文本：
      * innerHtml
      * innerText
      * nodeValue
      修改属性
       *.xxx=vvv
       setAttribute

4、查询(获取元素)

1、标准DOMAP

document.getElementById('id属性值');返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document/element.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值');返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器');仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');返回所有匹配的元素
document.documentElement;获取页面中的HTML标签
document.body;获取页面中的BODY标签
document.all[''];获取页面中的所有元素节点的对象集合型

2、亲属访问

element.parentNode;获取父节点
element.childNodes;获取子节点
element.attributes[]；获取元素列表
element.firstChild;对待标准和非标准模式，如childNods
element.lastChild;当前元素的第一个/最后一个子元素节点
element.firstElementChild;非标准不支持
element.lastElementChild;
element.nextSibling; 下一个/上一个兄弟元素节点
element.previousSibling;
element.nextElementSibling;
element.previousElementSibling;

3、属性访问

getAttributeNode;获取属性节点
hasAttributes();  是否有属性
nodeValue;节点内容(所有节点都有此属性body为null)
nodeName;节点名字(文本节点返回#test)
document.nodeType ;节点类型
1 元素节点 2 属性节点 3 文本节点 11 代码片段

实例1

//属性操作
var div=document.querySelectorAll("#dv")[0];
//使用setAttribute 添加属性
//添加自定义 非标准DOM
div.setAttribute("a","a");
//*.XXX=VVV
//标准属性
div.className = "b";
//使用DOM节点的方法
//DOM-core
var attr = document.createAttribute("c");
attr.nodeValue = "d";
div.setAttributeNode(attr);

实例2

单属性：一定设置为ture或者false 不能为checked 或者直接删除属性节点
var radio = document.querySelectorAll("#rd")[0];
//1
radio.removeAttribute("checked");
//2
var attr_1 = radio.getAttributeNode("checked");
radio.removeAttributeNode(attr_1);
//3
radio.checked = true;

实例3

/**
* 创建一个4*4的表格
 */
var body = document.body;
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for(var i=0;i<4;i++){
    var tr = document.createElement("tr");
    for (var j=0;j<4;j++) {
        var txt = document.createTextNode(i+"-"+j);
        var td = document.createElement("td");
        td.appendChild(txt);
        tr.appendChild(td);
        td.width=200;
        td.height = 50;
    }
    tbody.appendChild(tr);
}
table.border="1";
body.appendChild(table);