js獲取節點和編輯的方法

建立新節點

1.建立乙個dom片段

createdocumentfragment()

例如：

1

var d=document.createdocumentfragment();
2.建立乙個具體的元素
createelement() 
例如：1 document.createelement("input");

3.建立乙個文字節點

createtextnode() 

例如：

1 document.createtextnode("water")

新增、移除、替換、插入

1.新增子節點

1

var node=document.createelement("li");
2var textnode=document.createtextnode("water");
32.移除子節點
removechild()
1var list=document.getelementbyid("mylist");
2 list.removechild(list.childnodes[0]);

3.替換子節點

replacechild()

1

var textnode=document.createtextnode("water");
2var item=document.getelementbyid("mylist").childnodes[0];
3 item.replacechild(textnode,item.childnodes[0]); //
前面引數是新的節點，後面的是要被取代的節點

4.插入子節點

insertbefore()

1

var newitem=document.createelement("li")
2var textnode=document.createtextnode("water")34
var list=document.getelementbyid("mylist")
5 list.insertbefore(newitem,list.childnodes[0]); //
前面引數是新的節點，後面的是要插入節點的位置

jq的動態新增元素方法：

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

)。值得注意的是操作樣式的寫法：

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

JS獲取元素，節點的方法

一 設定或獲取元素物件中 標籤中 的屬性和自定義屬性 物件.屬性 物件 屬性 物件.getattribute 屬性名 物件.setattribute 屬性名 屬性值 物件.removeattribute 屬性名 二 outerhtml 當前節點物件及所有子節點 標籤及所有內容 innerhtml 當...

JS獲取子節點 父節點和兄弟節點

js獲取父節點 js獲取兄弟節點 var a document.getelementbyid test getelementsbytagname div 陣列格式，不包含換行和空格 var getfirstchild document.getelementbyid test children 0 陣...

JS獲取DOM節點

父節點id為target，有兩個字節點，獲取target下所有字節點 const childrens document.getelementbyid target getelementtagname div 得出的childrens是乙個陣列，陣列中的元素是target下的子節點。childnode...