核心DOM中的公共的屬性與方法
核心DOM中的公共的屬性與方法
#註：核心DOM中找出節點(標記)，都是從根節點開始的(html節點)。
節點存取
nodeName：節點名稱。- nodeValue：節點的值。只有文字節點才有值，元素節點沒有值。 nodeValue的值只能是“純文字”，不能含有任何的HTML標記或CSS屬性。
- firstChild：第1個子節點。
- lastChild：最後1個子節點。
childNodes：子節點列表，是一個陣列。
parentNode：父節點。- 尋找標記的方法
- #document.firstChild
document.firstChild.lastChild
document.body
- 對節點的屬性操作
- #setAttribute(name,value)：為某個節點新增一個屬性。
getAttribute(name)：取得某個節點屬性的值。
removeAttribute(name)：刪除某個節點的屬性。 <!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节点
var node_body = document.all.div1;
//查找img节点
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>
- #節點的建立
- tagName：是指不帶尖括號的HTML標記名稱。
- 範例：var imgObj = document.createElement(“img”)
- parentNode.appendChild(childNode)：將建立的節點，追加到某個父節點下。
- parentNode代表父節點，父節點必須存在。
- childNode代表子節點。
- 範例：document.body.appendChild(imgObj)
- ##parentNode.removeChild(childNode)：刪除某個父節點下的子節點。
- parentNode代表父節點。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>php.cn</title>
<script >
//网页加载完成后
window.onload = function(){
//创建一个<img>标记
var imgObj = document.createElement("img");
//增加属性
imgObj.setAttribute("src","/upload/course/000/000/009/580ae23c4a88a881.jpg");
imgObj.setAttribute("width","400");
//将创建的图片节点，挂载到某个父节点下
document.body.appendChild(imgObj);
}
</script>
</head>
<body>
</body>
</html> 
