核心DOM中的公共的屬性與方法LOGIN

核心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>

  • #節點的建立
  • ##document.createElement(tagName):建立一個指定的HTML標記,一個節點
    tagName:是指不帶尖括號的HTML標記名稱。
  • 範例:var imgObj = document.createElement(“img”)
  • parentNode.appendChild(childNode):將建立的節點,追加到某個父節點下。
    parentNode代表父節點,父節點必須存在。
  • childNode代表子節點。
    範例:document.body.appendChild(imgObj)
  • ##parentNode.removeChild(childNode):刪除某個父節點下的子節點。
  • parentNode代表父節點。

childNode代表要刪除的子節點。 ############範例:document.body.removeChild(imgObj)#########
<!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>
下一節
<!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>
章節課件