首頁 > web前端 > js教程 > 原生JavaScript對dom節點操作總結

原生JavaScript對dom節點操作總結

韦小宝
發布: 2018-03-09 14:10:09
原創
1938 人瀏覽過

在開發JavaScript程式的時候使用到最多的就是對dom的操作,今天我們也就把原生JavaScript對dom節點的操作做一個總結,大家對JavaScript操作dom節點理解的不完全的可以看看。

1、取得元素節點

取得單一元素:document.getElementById(); document.querySelector() //取得第一個元素;

取得多個元素(可以透過下標來選取單一元素,傳回一個元素集合,相當於一個陣列):

document.getElementsByTagName(); 
document.getElementsByName(); 
document.getElementsByClassName();// 动态,实时的 
document.querySelectorAll();// 查找速度比上面的块 //是静态的,非实时的,
登入後複製

創建元素,文字 

document.createElement(“p”); 
document.createNode(“hello”) //创建文件节点。
登入後複製

插入到文件 

parentNode.appendChild(newNode), 
parentNode.insertBefore(newNode,positionNode);
登入後複製

屬性運算 

ele.setAttribute(name,value)//设置属性 
ele.getAttribute(name)//获取元素的属性 
ele.removeAttribute(name)//移除属性
登入後複製

節點移除移除子

ele.remove(),parentNode.removeChild(childNode)
登入後複製

取代子元素 
##

parentNode.replaceChild(newNode,oldNode)
登入後複製

#複製元素 

ele.cloneNode(boolean);// boolean为true, 深复制。
登入後複製

2、取得子元素、父親元素、兄弟元素 ##

ele.previousElementSibling;//上一个兄弟元素 
ele.parentNode;//父元素 
ele.children//子元素 
ele.nextElementSibling//下一个兄弟元素
登入後複製

#更多關於節點操作:

jQuery中DOM節點操作方法總結

#

以上是原生JavaScript對dom節點操作總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板