dom物件（二）訪問和修改

2021-09-25 04:20:16 字數 2029 閱讀 4566

dom訪問和修改

訪問 html 元素（節點）

訪問 html 元素等同於訪問節點

您能夠以不同的方式來訪問 html 元素：

getelementbyid() 方法

getelementbyid() 方法返回帶有指定 id 的元素

語法：

node.getelementbyid("id");
下面的例子獲取 id=「intro」 的元素：

例項

document.getelementbyid("intro");
getelementsbytagname() 方法getelementsbytagname() 返回帶有指定標籤名的所有元素。

語法

node.getelementsbytagname("tagname");
下面的例子返回包含文件中所有

元素的列表：

例項 1:

document.getelementsbytagname("p");
下面的例子返回包含文件中所有 < p > 元素的列表，並且這些 < p > 元素應該是 id=「main」 的元素的後代（子、孫等等）：

例項 2

document.getelementbyid("main").getelementsbytagname("p");
getelementsbyclassname() 方法如果您希望查詢帶有相同類名的所有 html 元素，請使用這個方法：

document.getelementsbyclassname("intro");
上面的例子返回包含 class=「intro」 的所有元素的乙個列表：

注釋：getelementsbyclassname() 在 internet explorer 5,6,7,8 中無效。

修改 html = 改變元素、屬性、樣式和事件。

修改 html 元素修改 html dom 意味著許多不同的方面：

建立 html 內容

改變元素內容的最簡答的方法是使用 innerhtml 屬性。

下面的例子改變乙個 < p > 元素的 html 內容：

例項

我是沙漠之鷹！
檢視結果：

不！我是沙雕
這裡，段落內容被改變了

改變 html 樣式通過 html dom，您能夠訪問 html 元素的樣式物件。

下面的例子改變乙個段落的 html 樣式：

例項

我應該原諒他嘛？
檢視結果：

我應該原諒他嘛？
這裡，段落內容的字型顏色被改變為綠色

建立新的 html 元素如需向 html dom 新增新元素，您首先必須建立該元素（元素節點），然後把它追加到已有的元素上。

例項

我是大當家


我是二當家
檢視結果：

我是大當家


我是二當家


俺是新來的，就叫我小三吧！
這裡，第三個段落是最新建立的

joker：這個世界帶給我們最大的對手，由自我產生！

js 訪問DOM物件

document物件 document物件實際上是window物件的屬性.所以,如下訪問是正確的 window.document.document 有許多屬性 常用的,可讀寫的 document.title 改變頁面標題 document.url 載入新頁面 document集合 document....

訪問DOM物件指定節點

一 介紹 使用getelementbyid 方法來訪問指定id的節點，並用nodename屬性 nodetype屬性和nodevalue屬性來顯示出該節點名稱 節點型別和節點值。1 nodename屬性 該屬性用來獲取某乙個節點的名稱。sname obj.nodename sname 字串變數用來儲...

訪問DOM物件指定節點

一 介紹 使用getelementbyid 方法來訪問指定id的節點，並用nodename屬性 nodetype屬性和nodevalue屬性來顯示出該節點名稱 節點型別和節點值。1 nodename屬性 該屬性用來獲取某乙個節點的名稱。sname obj.nodename sname 字串變數用來儲...