DOM通過技術操作HTML

2021-09-29 11:34:00 字數 3263 閱讀 8127

1.通過 id 找到 html 元素

2.通過標籤名找到 html 元素

3.通過類名找到 html 元素

通過 id 查詢 html 元素
注意：

如果找到該元素，則該方法將以物件（在 x 中）的形式返回該元素。

如果未找到該元素，則 x 將包含 null。

通過標籤名查詢 html 元素

本例查詢 id=「main」 的元素，然後查詢 id=「main」 元素中的所有

元素：

var o=document.


getelementbyid


("main");


var y=o.


getelementsbytagname


("p"


);
通過類名找到 html 元素

本例通過 getelementsbyclassname 函式來查詢 class=「do」 的元素：

var o=document.


getelementsbyclassname


("do"


);


var odiv=document.


createelement


("div");


//新增乙個div


odiv.innerhtml=


"你好"


;//在divzhong新增內容；


<


/script>
//建立乙個元素


var para = document.


createelement


("p");


//為 元素建立乙個新的文字節點:


var node = document.


createtextnode


("這是乙個新的段落。");


//將文字節點新增到 元素中：


para.


(node)


;
在乙個已存在的元素中新增 p 元素。

查詢已存在的元素：

var o = document.


getelementbyid


("div1");


//新增到已存在的元素中:


o.(para)


;
如果我們需要將新元素新增到開始位置，可以使用 insertbefore() 方法:

"div"


>


"p1"


>這是乙個段落。<


/p>


"p2"


>這是另外乙個段落。<


/p>


<


/div>


var para = document.


createelement


("p");


var node = document.


createtextnode


("這是乙個新的段落。");


para.


(node)


;var o= document.


getelementbyid


("div");


var child = document.


getelementbyid


("p1");


o.insertbefore


(para, child)


;<


/script>
要移除乙個元素，你需要知道該元素的父元素。

"div1"


>


"p1"


>這是乙個段落。<


/p>


"p2"


>這是另外乙個段落。<


/p>


<


/div>


var parent = document.


getelementbyid


("div1");


var child = document.


getelementbyid


("p1");


parent.


removechild


(child)


;<


/script>
"div1"


>


"p1"


>這是乙個段落。<


/p>


"p2"


>這是另外乙個段落。<


/p>


<


/div>


var para = document.


createelement


("p");


var node = document.


createtextnode


("這是乙個新的段落。");


para.


(node)


;var parent = document.


getelementbyid


("div1");


var child = document.


getelementbyid


("p1");


parent.


replacechild


(para, child)


;<


/script>
定義和用法：

clonenode() 方法建立節點的拷貝，並返回該副本。

clonenode() 方法轉殖所有屬性以及它們的值。

如果您需要轉殖所有後代，請把 deep 引數設定 true，否則設定為 false。

語法node.clonenode(deep)；

"box"


>


你好<


/p>


hello<


/p>


hi<


/p>


哈嘍<


/p>


<


/div>


var node=document.


getelementbyid


("box"


).children[0]


;var lis=node.


clonenode


(true);


//複製節點


node.


(lis)


;<


/script>

通過DOM操作獲取html頁面元素

1.通過id名 document.getelementbyid 2.通過tag名 document.getelementbytagname document.getelementsbytagname 3.通過class名 document.getelementsbyclassname 4.通過sel...

Dom操作html詳細

忘記我見過 byname var namea document.getelementsbyname pn document.write 通過name獲取元素 namea namea 0 innerhtml hello bytagname var nameb document.getelementsb...

DOM對HTML元素訪問操作2

form 返回列表框 下拉列表所在的表單物件 length 返回列表框 下拉列表的選項個數 options 返回列表框 下拉列表裡所有選項組成的陣列 selectedindex 返回下拉列表中選中選項的索引 type 返回下拉列表的型別，多選的話返回select multiple，單選返回selec...