js获取节点和编辑的方法

时间：2023-03-08 17:05:27
js获取节点和编辑的方法

创建新节点

1.创建一个DOM片段
createDocumentFragment()

例如：

 var d=document.createDocumentFragment();

 d.appendChild(document.getElementsByTagName("LI")[0]);

2.创建一个具体的元素
createElement()

例如：

 document.createElement("input");

3.创建一个文本节点
createTextNode()

例如：

 document.createTextNode("Water")

添加、移除、替换、插入

1.添加子节点

appendChild()

 var node=document.createElement("LI");

 var textnode=document.createTextNode("Water");

 node.appendChild(textnode);

 document.getElementById("myList").appendChild(node);

2.移除子节点

removeChild()

 var list=document.getElementById("myList");

 list.removeChild(list.childNodes[0]);

3.替换子节点

replaceChild()

 var textnode=document.createTextNode("Water");

 var item=document.getElementById("myList").childNodes[0];

 item.replaceChild(textnode,item.childNodes[0]); //前面参数是新的节点，后面的是要被取代的节点

4.插入子节点

insertBefore()

 var newItem=document.createElement("LI")

 var textnode=document.createTextNode("Water")

 newItem.appendChild(textnode)

 var list=document.getElementById("myList")

 list.insertBefore(newItem,list.childNodes[0]); //前面参数是新的节点，后面的是要插入节点的位置

JQ的动态添加元素方法：

1.append() 方法在被选元素的结尾插入内容。

2.prepend() 方法在被选元素的开头插入内容。

3.after() 方法在被选元素之后插入内容。

4.before() 方法在被选元素之前插入内容。

从document查找

1.document.getElementById()

靠id获取节点

2.document.getElementsByClassName()

靠类名获取节点集（数组）

3.document.getElementsByTagName()  IE9+才兼容~~

靠标签名获取节点集（数组）

4.document.createElement()

创建新的节点

5.document.querySelector()

靠CSS选择符获取节点

6.document.querySelectorAll()

靠CSS选择符获取节点集（数组）

查找父节点

node.parentNode 和 node.parentElement

直接获取父层元素两者是一样的，前者是w3c标准。

node.offsetParent：相对于哪元素定位，就是哪个元素

查找子节点

node.childNodes 获取所有子节点，包括了注释

node.children 获取所有子元素（有标签的才算！！）

查找兄弟节点

node.previousSibling 获取前一位兄弟节点，包括了注释

node.nextSibling 获取后一位兄弟节点，包括了注释

node.previousElementSibling  获取前一位兄弟元素（有标签的才算！！）

node.nextElementSibling  获取前一位兄弟元素（有标签的才算！！）

判断node种类：node.nodeType  1->telement 3->text 8->tcomment

获取元素节点后，可以用之前提到过的点表示法和方括号表示法来编辑操作元素节点的属性（id、src、className、style、offsetTop、offsetWidth、clientWidth、scrollWidth....）和内容(innerHTML、outerHTML、innerText、textContent、childNodes、appendChild、removeChild....)。

值得注意的是操作样式的写法：

1.第一种是  node.style.样式名  的写法：例如div.style.height="100px"(比较特别的：有-的样式名如div.style.backgroundColor,浮动div.style.cssFloat)

2.第二种是  node.style.cssText  的写法：例如div.style.cssText="display:block;width:100px;height:100px"

ps：还有一种获取实际浏览器计算出来的样式，例如 getComputedStyle(div[,'::after']).color

相关文章