JS笔记整理(五)

dom操作：

node操作
1.document.getElementById("id");
2.document.getElementsByName("name");
3.document.getElementsByTagName("tagname");
4.document.getElementsByClassName("classname");
5.getAttribute("id");
6.setAttribute("id","div1");
7.removeAttribute("id");

获取元素标签:
1.obj.innerHTML
2.obj.outerHTML

获取元素中的文本:
1.obj.textContent;

node节点操作
1.document节点
2.元素节点
3.属性节点
4.文本节点

节点关系:
1.父子关系
2.兄弟关系

节点属性:
1.节点名称
obj.nodeName

2.节点类型
obj.nodeType
1 元素节点
2 属性节点
3 文本节点
9 文档节点

3.节点值(key=value结构的才有值)
obj.nodeValue
属性节点(节点名称，节点类型=>2，节点值)
文本节点(节点名称，节点类型=>3，节点值)
元素节点(节点名称，节点类型=>1)
文档节点(节点名称=>#document,节点类型=>9)
节点的增、删、改、查(重点)

节点类型
1.元素节点
2.属性节点
3.文本节点
4.文档节点 #document 9 null

节点属性
1.节点名称-nodeName
2.节点类型-nodeType
3.节点值-nodeValue(元素节点没有)

三种节点和属性
1.元素节点
1)nodeName div
2)nodeType 1
3)nodeValue null
2.属性节点
1)nodeName id
2)nodeType 2
3)nodeValue "div1"
3.文本节点
1)nodeName #text
2)nodeType 3
3)nodeValue "aaaaaaaaaaaaa"


查
1.获取元素节点
1).document.getElementById("id");
2).document.getElementsByName("name");
3).document.getElementsByTagName("tagname");
4).document.getElementsByClassName("classname");

2.获取属性节点
1)obj.attributes;
2)obj.getAttribute("id");

3.获取文本节点
1)var obj=document.getElementById("div1");
for(var i=0;i<obj.childNodes.length;i++){
if(obj.childNodes[i].nodeType==3){
document.write(obj.childNodes[i].nodeType,"<br>");
}
}
//注意页面上的回车转行也算一个文本节点

4.获取子节点
1)obj.childNodes; //获取子节点

5.获取第一个子节点
1)obj.firstChild;

6.获取最后一个子节点
1)obj.lastChild;

7.获取父节点
1)nodeobj.parentNode;

8.获取子元素节点
1)obj.children;
//获取元素中的子元素对象，不要文本

9.获取父元素节点
1)obj.parentElement;
//和obj.parentNode相同，获取同一个人，是单数

10.获取前一个兄弟元素
1)obj.previousSibling;

11.获取下一个兄弟元素
1)obj.nextSibling;


增
1.增加元素节点
1)var obj=document.getElementById("div1");
var obj2=document.createElement("h1");
obj2.id="hid4";
obj2.innerHTML="dddddddddddd";
obj.appendChild(obj2);
alert(obj.childNodes.length);
alert(document.body.innerHTML);
//document.createElement("元素标签");
//appendChild("追加子节点");
2)把一个子节点(new)插入到另外一个节点(old)之前，父节点.insertBefore(new,old);
var oldobj=document.getElementById("div1");
var newobj=document.createElement("h1");
newobj.id="hid4";
newobj.innerHTML="dddddddddddd";
oldobj.parentNode.insertBefore(newobj,oldobj);

2.增加属性节点
1)obj.setAttribute("age","30");
2)attrobj=document.createAttribute("age");
attrobj.nodeValue=30;
obj.setAttributeNode(attrobj);

3.增加文本节点
1)obj.innerHTML="aaaaaa";
2)obj.textContent="aaaaaa";
3)textobj=document.createTextNode("aaaaaaa");
obj.appendChild(textobj);
//追加的文本和前面文本不会合并成一个


删
1.删除子节点
parentNode.removeChild(x);

2.删除属性节点
obj.removeAttribute("age")

3.删除文本节点(文本节点属于子节点,与删除子节点方法相同)
parentNode.removeChild(x);


改
1.修改元素节点
//元素本身是需要修改的,比如修改a标签本身是没有意义的，而是修改它身上的属性和里面的文本节点

2.修改属性节点
obj.setAttribute("age",40);

3.修改文本节点
1)textobj.nodeValue="bbbbbbbbb";
2)var obj=document.getElementById("hid1").childNodes[0];
var str="linux";
obj.insertData(3,str);
alert(obj.parentNode.childNodes.length);


替换
1.替换子节点
父节点.replaceChild(newtext,oldtext)

2.替换文本节点
textobj.replaceData(offset,length,str)


克隆
1.复制节点(克隆元素节点和文本节点)
obj.cloneNode();
//默认参数为true,一般情况下把一个节点放到另的地方去，都是移动，而不是复制，除非用cloneNode()方法
obj.cloneNode(false);
//只复制元素空架,没有里面的子节点