元素節點的屬性和方法
阿新 • • 發佈：2018-09-03
ntb div 節點 -c obj name ron func efi 元素節點的屬性
/*
tagName
innerHTML 雙標簽
value 單標簽(input,textarea(雖然是雙標簽))既一般為表單標簽
*/
節點屬性只能獲取行間樣式
<script> /* tagName innerHTML 雙標簽 value 單標簽(input,textarea(雖然是雙標簽))既一般為表單標簽 */ window.onload= function(){ var oDiv = document.getElementById(‘div1‘); //tagName 當前標簽的名字 全大寫 // alert(oDiv.tagName); /* innerHTML 是標簽間內容,並且如果標簽含有html代碼，會自動解析。 */ // alert(oDiv.innerHTML);//<h1>我是內容</h1> oDiv.innerHTML = "<em>em</em>"; //em } </script> </head> <body> <div id = ‘div1‘><h1>我是內容</h1></div> </body>
補充：
window.onload = function(){ var oDiv = document.getElementById(‘div1‘); /* 行間屬性（只能修改css的內聯樣式） */ /* alert(oDiv.id);//dox1 alert(oDiv.title);//world alert(oDiv.className); //box */ //修改元素節點屬性 /* oDiv.title = "hello";// oDiv 節點的title屬性 修給為hello 既將 world修改為hello oDiv.className = ‘box22‘;//oDiv 節點的class屬性 修給為box22 既將 box修改為box22*/ // alert(oDiv.style); //object CSS2Properties css樣式對象 /* alert(oDiv.style.width);//200px alert(oDiv.style.height);//200px */ /* 凡是帶-的css樣式屬性，需要，將-去掉，後面單詞的首字母大寫。(例background-color 選擇節點屬性時要寫成 backgroundColor) */ alert(oDiv.style.backgroundColor);//red oDiv.style.backgroundColor = "blue"; //修改元素節點oDiv的style屬性的background-color屬性 為blue; } </script> </head> <body> <div id = ‘div1‘ class = ‘box‘ title = ‘world‘ style = ‘width:200px; height:200px; <h1>我是內容</h1> </div> </body>
【註】獲取元素節點的屬性一般為： 節點.行間屬性名，例如 oDiv.title \ oDiv.style \ oDiv.id, 但是獲取class屬性時，不能寫成 oDiv.class 因為 class 是 js語法中的 一個關健字（保留字），這與css中的屬性名沖突了，所以要獲取 節點的class屬性 要用 className, 既 oDiv.className
元素節點的方法（與元素節點屬性對比記憶）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
/*
元素節點的方法。
setAttribute
getAttribute
removeAttribute
行間的屬性
*/
window.onload = function(){
var oDiv = document.getElementById(‘div1‘);
/* //元素節點屬性獲取
alert(oDiv.id); //div1
alert(oDiv.title);// hello
//元素節點方法獲取
alert(oDiv.getAttribute("id")); //div1
alert(oDiv.getAttribute("title")); //hello
*/
//1、獲取class
/*
alert(oDiv.className);//box
alert(oDiv.getAttribute("class"));//box
*/
//2、自定義屬性
//我們在div標簽中隨便寫了一個（自定義）屬性和屬性值 xxx = ‘x‘ ,用於測試 元素節點屬性 與元素節點方法獲取的區別
//測試一
alert(oDiv.xxx);// undefined
alert(oDiv.getAttribute("xxx")); //x
/*這裏我們就很明顯的看出了兩者區別 .getAttribute 是支持自定義的屬性的，而元素節點的屬性則不能*/
//測試二
oDiv.className = ‘box2‘; //利用元素節點屬性將div的class屬性值改為 box2
oDiv.setAttribute(‘class‘, ‘box3‘); //利用元素節點方法將div的class屬性值改為 box3
/*可見在修改屬性值方面這兩中方法並沒有明顯的區別*/
//測試三
oDiv.xxx = "yyy";//結果改不掉xxx依然等於x（不會報錯） //利用元素節點屬性將div的自定義xxx屬性值改為 yyy
oDiv.setAttribute("xxx", "yyy"); //xxx = ‘yyy‘ 可以修改成功
/*可見只有setAttribute對自定義屬性有效*/
//測試四
oDiv.title = ""; //title 利用元素節點屬性只能將屬性值賦成空，但不能刪除
oDiv.removeAttribute("title"); //可以將屬性值刪除
}
</script>
</head>
<body>
<div id = ‘div1‘ title = ‘hello‘ name = ‘world‘ class = ‘box‘ xxx = ‘x‘>div</div>
</body>
</html>
上面代碼測試效果圖：
測試一 無
測試二：
元素節點屬性修改class屬性值
元素節點方法修改class屬性值：
測試三：
元素節點和屬性修改不了
元素節點方法修改自定義屬性值
測試四：
元素節點屬性使屬性值為空
removeAttribute移除屬性值
元素節點的屬性和方法