JS中的DOM節點以及操作

2021-09-20 21:51:12 字數 2213 閱讀 5102

操作屬性節點有兩種當時,一種是通過普通物件的方式來操作屬性節點,另外一種是通過屬性節點的方法來操作屬性節點。

如果我們可以把元素節點當成普通物件來處理,通過 元素節點.屬性 或 元素節點[屬性] 的方式來設定屬性。

注意:設定類 class 只能用 classname

1.1 獲取屬性

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

var box = document.getelementsbyclassname("box")[0];

var input = document.getelementsbytagname("input")[0]; // 獲取屬性節點 console.log(img.src);

console.log(box.classname); // 注意:class屬性的時候使用classname console.log(input["type"]);

1.2 設定屬性
var img = document.getelementsbytagname('img')[0]; 

var box = document.getelementsbyclassname("box")[0];

var input = document.getelementsbytagname("input")[0]; // 設定屬性值 img["src"] = "img/fengche.png";

box.classname = "bigbox"; // 注意:設定class屬性的時候使用classname input.placeholder = "請輸入密碼";

input.type = "password";

2.1 getattribute
var img = document.getelementsbytagname('img')[0]; 

var box = document.getelementsbyclassname("box")[0];

var input = document.getelementsbytagname("input")[0]; // 獲取屬性值 var src = img.getattribute("src");

console.log(src);

var classname = box.getattribute("class");

console.log(classname);

var type = input.getattribute("type");

console.log(type);

2.2

元素節點.setattribute(屬性名,屬性值)設定屬性值或修改屬性值。

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

var box = document.getelementsbyclassname("box")[0];

var input = document.getelementsbytagname("input")[0]; // 設定屬性值 img.setattribute("src", "img/fengche.png");

box.setattribute("class", "bigbox"); input.setattribute("type", "password");

2.3 hasattribute

元素節點. hasattribute(屬性名),判斷物件裡面是否包含該屬性。

var img = document.getelementbyid("img");

if (img.hasattribute("class")) else

2.4 removeattribute 元素節點.removeattribute(屬性名)刪除屬性。

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

var box = document.getelementsbyclassname("box")[0];

var input = document.getelementsbytagname("input")[0]; // 刪除屬性 img.removeattribute("title"); box.removeattribute("class"); input.removeattribute("type");

js操作dom節點

1.訪問節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意 elements document.getelementsbytagname tagname ...

js操作dom節點

1.訪問節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意 elements document.getelementsbytagname tagname ...

JS中的DOM內容節點操作

document 物件中有innerhtml和innertext 兩個屬性,這兩個屬性都是獲取和修改 document 物件的文字內容。innerhtml 設定或返回所選元素的內容 包括 html 標記 給p標籤新增文字內容 給div標籤新增標籤innertext 設定或返回所選元素的文字內容 不包...