核心DOM中的公共的屬性與方法
核心DOM中的公共的屬性與方法
#註:核心DOM中找出節點(標記),都是從根節點開始的(html節點)。
節點存取
- 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>