javascript DOM基本操作

2021-07-25 17:34:52 字數 2757 閱讀 7952

1.用指定id選取元素 document.getelementbyid

id="div">div>

document.getelementbyid('div');

2.用指定名字選取元素 document.getelementsbyname

一些html元素擁有name屬性(比如、、、、和等),非唯一,所以多個元素可能有相同的名字。

基於name屬性的值選取html元素,可以使用document物件的getelementsbyname()方法,返回乙個nodelist物件(類陣列物件)。

"input"/>

var inputs = document.getelementsbyname('input');

inputs[0].tagname //input

注意:getelementsbyname()定義在htmldocument類中,而不在document類中,所以它只針對html文件可用,在xml中不可用。

3.用指定標籤名選取元素 getelementsbytagname

下面的**就是查詢文件中第乙個

元素裡面的所有元素。

var p = document.getelementsbytagname('p')[0];

var span = p.getelementsbytagname('span');

4.通過css類選取元素 getelementsbyclassname() 方法

如果您希望查詢帶有相同類名的所有 html 元素,請使用這個方法:

document.getelementsbyclassname(「intro」);

上面的例子返回包含 class=」intro」 的所有元素的乙個列表

document.getelementbyid("item2").previoussibling

;\

4.nextsibling

返回某個元素之後緊跟的節點

document.getelementbyid("item1").nextsibling

;

5.parentnode

返回選中的元素父節點:

document.getelementbyid("item1").parentnode

;

1.createelement

建立乙個按鈕:

var btn=document.createelement("button");
2.createattribute()

建立 class 屬性, 屬性值為 「democlass」, 並將clas屬性新增到 h1 元素中

var att=document.createattribute("class");

att.value="democlass"

;document.getelementsbytagname("h1")[0].setattributenode(att);

3.createtextnode()

建立乙個文字節點:

var btn=document.createtextnode(「hello world」);

var node=document.createelement("li");

var textnode=document.createtextnode("water");

2.insertbefore()

document.getelementbyid("mylist").insertbefore(newitem,existingitem);
3.replacechild()

document.getelementbyid("mylist").replacechild(newnode,oldnode);
4.clonenode

var node=document.getelementbyid("mylist2").lastchild

.clonenode(true);

5.removechild()

var

list=document.getelementbyid("mylist");

list.removechild(list.childnodes[0]);

document.getelementsbytagname("a")[0].getattribute("target");
輸出結果:

_blank
2.setattribute()

document.getelementsbytagname("input")[0].setattribute("type","button");
3.removeattribute()

document.getelementsbytagname("h1")[0].removeattribute("style");

javaScript DOM程式設計

1.獲取dom樹的根節點 2.getelementbyid 根據標籤的id獲取標籤元素和getelementsbytagname根據標籤名獲取標籤,返回的是陣列的形式 3.getelementsbynames 根據標籤的name屬性獲取標籤,返回的是陣列形式 有兩個input標籤,因此列印結果是2 ...

JavaScript DOM程式設計

dom document objective model 文字物件模型 例子 clickme 例子 先獲取某一指定的元素節點 再讀指定元素節點的屬性 設定指定元素節點的屬性的值 例子 你喜歡那個城市?你喜歡哪款單擊遊戲?name 先獲取某節點。用childnodes方法獲取指定元素節點的所有子節點。...

javascript DOM 獲取節點

1.獲取元素節點 1.1 通過元素節點的id屬性獲取 語法 document.getelementbyid 元素id屬性的值 例如 1.2 根據元素的名稱獲取,獲取的是所有為該名稱的元素節點組成的陣列,可以用陣列的方法操作該節點陣列 語法 document.getelementsbytagname ...