核心DOM中的公共的屬性和方法
核心DOM中的公共的屬性和方法
注：核心DOM中查找節(jié)點(diǎn)(標(biāo)記)，都是從根節(jié)點(diǎn)開(kāi)始的(html節(jié)點(diǎn))。
節(jié)點(diǎn)訪問(wèn)
nodeName：節(jié)點(diǎn)名稱。
nodeValue：節(jié)點(diǎn)的值。只有文本節(jié)點(diǎn)才有值，元素節(jié)點(diǎn)沒(méi)有值。nodeValue的值只能是“純文本”，不能含有任何的HTML標(biāo)記或CSS屬性。
firstChild：第1個(gè)子節(jié)點(diǎn)。
lastChild：最后1個(gè)子節(jié)點(diǎn)。
childNodes：子節(jié)點(diǎn)列表，是一個(gè)數(shù)組。
parentNode：父節(jié)點(diǎn)。
查找標(biāo)記的方法
document.firstChild
document.firstChild.lastChild
document.body
對(duì)節(jié)點(diǎn)的屬性操作
setAttribute(name,value)：給某個(gè)節(jié)點(diǎn)添加一個(gè)屬性。
getAttribute(name)：獲取某個(gè)節(jié)點(diǎn)屬性的值。
removeAttribute(name)：刪除某個(gè)節(jié)點(diǎn)的屬性。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
window.onload = function(){
//查找body節(jié)點(diǎn)
var node_body = document.all.div1;
//查找img節(jié)點(diǎn)
var imgObj = node_body.firstChild;
//增加屬性
imgObj.setAttribute("src","https://img.php.cn/upload/course/000/000/009/580ae23c4a88a881.jpg");
imgObj.setAttribute("width","400");
imgObj.setAttribute("border","2");
imgObj.setAttribute("style","cursor:pointer;");
//刪除border屬性
imgObj.removeAttribute("border");
}
</script>
</head>
<body ><div id="div1"><img /></div></body>
</html>節(jié)點(diǎn)的創(chuàng)建
document.createElement(tagName)：創(chuàng)建一個(gè)指定的HTML標(biāo)記，一個(gè)節(jié)點(diǎn)
tagName：是指不帶尖括號(hào)的HTML標(biāo)記名稱。
舉例：var imgObj = document.createElement(“img”)
parentNode.appendChild(childNode)：將創(chuàng)建的節(jié)點(diǎn)，追加到某個(gè)父節(jié)點(diǎn)下。
parentNode代表父節(jié)點(diǎn)，父節(jié)點(diǎn)必須存在。
childNode代表子節(jié)點(diǎn)。
舉例：document.body.appendChild(imgObj)
parentNode.removeChild(childNode)：刪除某個(gè)父節(jié)點(diǎn)下的子節(jié)點(diǎn)。
parentNode代表父節(jié)點(diǎn)。
childNode代表要?jiǎng)h除的子節(jié)點(diǎn)。
舉例：document.body.removeChild(imgObj)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>php.cn</title>
<script >
//網(wǎng)頁(yè)加載完成后
window.onload = function(){
//創(chuàng)建一個(gè)<img>標(biāo)記
var imgObj = document.createElement("img");
//增加屬性
imgObj.setAttribute("src","/upload/course/000/000/009/580ae23c4a88a881.jpg");
imgObj.setAttribute("width","400");
//將創(chuàng)建的圖片節(jié)點(diǎn)，掛載到某個(gè)父節(jié)點(diǎn)下
document.body.appendChild(imgObj);
}
</script>
</head>
<body>
</body>
</html> 
