HTML DOM學習筆記(二) DOM常用方法

2021-08-08 16:42:47 字數 1748 閱讀 5552

方法是在html元素上執行的動作;

該方法方法返回帶有指定id的元素。

比如說,獲取id=」a」的元素:

document.getelementbyid("a");
該方法方法返回帶有指定標籤名稱的所有元素的節點列表(集合/節點陣列)。

比如說,想要獲取到文件中所有元素的列表:

document.getelementbytagname("a");
該方法返回帶有指定類名的所有元素的節點列表。

比如說,想要獲取class=」a」的所有元素:

document.getelementbyclassname("a");
該方法把新的子節點新增到指定節點。

該方法刪除子節點。

該方法替換子節點。

該方法在指定的子節點前面插入新的子節點。

該方法建立元素節點。

該方法建立文字節點。

通過以上方法我們可以向html dom 做增刪改查操作;

新增新的html元素

首先必須建立該元素,然後把它追加到已有的元素上。

如:

id="d1">

id="p1">hello,dom!p>

id="p2">hello,html dom!.p>

div>

var para=document.createelement("p");//建立了乙個新的元素:

var node=document.createtextnode("this is dom.");//建立文字節點

var element=document.getelementbyid("d1");//查詢到乙個已有的元素

script>

body>

html>

刪除已有元素

首先需要了解該元素的父元素!

**如下:

var parent=document.getelementbyid("d1");

var child=document.getelementbyid("p1");

parent.removechild(child);

script>

有乙個常用的解決方法:找到要刪除的子元素,然後使用parentnode屬性來查詢其父元素:

var child=document.getelementbyid("p1");

child.parentnode

.removechild(child);

替換html元素

var parent=document.getelementbyid("d1");

var child=document.getelementbyid("p1");

var para=document.createelement("p");

var node=document.createtextnode("this is new dom.");

parent.replacechild(para,child);

script>

HTML DOM學習之二

1.html dom屬性 innerhtml屬性 獲取元素內容的最簡單方法是使用innerhtml屬性,innerhtml屬性對於獲取或替換html元素的內容很有用 hello world 2.nodename屬性規定節點的名稱 nodename是唯讀的 元素節點的nodename與標籤名相同 屬性...

HTML DOM與核心DOM的區別

dom分為三部分 1 核心dom 遍歷dom樹 新增新節點 刪除節點 修改節點 2 html dom 以一種簡便的方法訪問dom樹 3 xml dom 準用於操作xml文件 核心dom與html dom的區別 核心dom 物件 document,node,elementnode,textnode,a...

核心dom和html dom的區別

核心dom 物件 document,node,elementnode,textnode,attributenode,commentnode,nodelist 核心dom提供了統一的操作介面 createelement setattribute removeattribute nodename 核心d...