小編給大家分享一下Javascript Dom元素獲取和添加的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
1.Dom元素的獲取
document.getElementById()：通過id獲取一個Dom元素
document.getElementsByClassName()：通過class名字獲取一個或多個Dom元素（偽數組）
document.getElementsByTagName()：通過標簽名字獲取一個或多個Dom元素（偽數組）
document.querySelector()：獲取指定 CSS 選擇器的一個元素
document.querySelectorAll()：獲取指定 CSS 選擇器的多個元素（偽數組）
ES6選擇器與其他選中器的區別：
document.getElementsByTagName()和document.getElementsByClassName()獲取到的都是動態列表
document.querySelectorAll()獲取到的是靜態列表,Dom結構發生變化要重新獲取，不然會出問題
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<ul>
<li class="test">1</li>
<li class="test">2</li>
<li class="test">3</li>
<li class="test">4</li>
</ul>
</body>
</html>
<script>
var lis = document.getElementsByTagName('li')
var liByQuery = document.querySelectorAll('li')
console.log(lis.length) // 4
console.log(liByQuery.length) // 4
// 動態添加li標簽
document.querySelector('ul').innerHTML += "<li class='test'>5</li>"
console.log(lis.length) // 5
console.log(liByQuery.length) // 4
</script>document.getElementsByTagName()和document.getElementsByClassName()獲取到的是 HTMLCollection，不能使用foreach()遍歷
document.querySelectorAll()獲取到的NodeList，可以使用foreach()遍歷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=2.0">
<title>Test</title>
</head>
<body>
<ul>
<li class="test">1</li>
<li class="test">2</li>
<li class="test">3</li>
<li class="test">4</li>
</ul>
</body>
</html>
<script>
var li = document.getElementsByTagName('li')
var li2 = document.getElementsByClassName('test')
var li3 = document.querySelectorAll('li')
var li4 = document.querySelector('ul').children
console.log(li) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
console.log(li2) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
console.log(li3) // NodeList(4) [li.test, li.test, li.test, li.test]
console.log(li4) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
</script>2.Dom元素節點類型
Dom節點類型分3類：元素節點,屬性節點,文本節點
每種節點都有3種屬性 nodeName,nodeType,nodeValue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<div id="box" title="我在哪">我是誰</div>
</body>
</html>
<script>
// 獲取元素節點
var box = document.querySelector('#box')
// 元素節點的屬性
console.log(box.nodeName);//DIV
console.log(box.nodeType); //1
console.log(box.nodeValue); //一律為null
// 根據屬性名獲取單個屬性節點
var attrTitle = box.getAttributeNode("title")
// 獲取元素屬性的集合(一個偽數組對象)
var box_attributes = box.attributes
// 屬性節點的屬性
console.log(attrTitle.nodeName);//title
console.log(attrTitle.nodeType); //2
console.log(attrTitle.nodeValue); //"我在哪"
// 獲取box的文本節點（沒有專門的方法用來獲取文本節點，但是這個div的第一個子節點就是文本節點）
var textNode = box.childNodes[0];
// 文本節點的屬性
console.log(textNode.nodeName);//#text
console.log(textNode.nodeType); //3
console.log(textNode.nodeValue); //"我是誰"
</script>3.獲取Dom元素的子元素，父元素，兄弟元素
通過children屬性可以獲取當前Dom元素的子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<script>
// 獲取ul元素
var ul = document.querySelector('ul')
// 獲取ul子元素
var ul_children = ul.children
// 遍歷子元素
for(var i=0;i<ul_children.length;i++){
console.log(ul_children[i].innerHTML)
// 1
// 2
// 3
}
</script>獲取當前元素的父元素
parentElement/parentNode這兩個屬性都可以
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<script>
// 獲取ul元素
var ul = document.querySelector('ul')
// 獲取父元素(ul的父級就是body)
var parent = ul.parentElement
var parentNode = ul.parentNode
console.log(parent.nodeName) // BODY
console.log(parentNode.nodeName) // BODY
</script>獲取當前元素的兄弟元素
previousElementSibling屬性：上一個兄弟元素
nextElementSibling屬性：下一個兄弟元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<ul>
<li>1</li>
<li id="test">2</li>
<li>3</li>
</ul>
</body>
</html>
<script>
// 獲取id為test的li元素
var li = document.querySelector('#test')
// 獲取兄弟元素
var preBrother = li.previousElementSibling
var nextBrother = li.nextElementSibling
console.log(preBrother.innerHTML) // 1
console.log(nextBrother.innerHTML) // 3
</script>注意：
children與childNodes，前者只包含元素節點，而后者為元素節點+文本節點（回車換行也算是文本節點）
而previousElementSibling與previousSibling，nextElementSibling與nextSibling也一個道理
firstChild和lastChild：firstChild等價于childNodes[0]，lastChild相當于childNodes的最后一個元素
4.DOM元素的添加與移除
添加子元素
appendChild()：將目標元素作為子元素添加到當前元素的最后面
insertBefore()：將目標元素作為子元素添加到當前元素中，位置可以自由選擇
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<ul>
<li>1</li>
<li id="test">2</li>
<li>3</li>
</ul>
</body>
</html>
<script>
// 獲取ul元素
var ul = document.querySelector('ul')
// 創建li元素
var liNode = document.createElement('li')
liNode.innerHTML = "4"
// 將創建的li元素添加到ul中(最后面)
ul.appendChild(liNode)
// 再創建li元素
var liNode2 = document.createElement('li')
liNode2.innerHTML = "life"
var li_test = document.querySelector('#test')
// 將創建的li元素添加到ul中(li_test的前面)
ul.insertBefore(liNode2,li_test)
</script>運行結果
<ul> <li>1</li> <li>life</li> <li id="test">2</li> <li>3</li> <li>4</li> </ul>
刪除子元素和替換子元素
removeChild()：刪除子元素
replaceChild()：替換子元素
語法：parent.removeChild(child)
語法：parent.removeChild(替換的元素, 被替換的元素)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
</style>
<body>
<ul>
<li>1</li>
<li id="test">2</li>
<li id="replace">3</li>
</ul>
</body>
</html>
<script>
// 獲取ul元素
var ul = document.querySelector('ul')
// 獲取要刪除的li元素
var li_test = document.querySelector('#test')
// 刪除子元素
ul.removeChild(li_test)
// 獲取要替換的li元素
var li_replace = document.querySelector('#replace')
// 創建要替換的元素
var newLI = document.createElement('li')
newLI.innerHTML = "replace li tag"
// 替換元素
ul.replaceChild(newLI,li_replace)
</script>運行結果：
<ul> <li>1</li> <li>replace li tag</li> </ul>
1.可以使網頁具有交互性，例如響應用戶點擊，給用戶提供更好的體驗。 2.可以處理表單，檢驗用戶的輸入，并提供及時反饋節省用戶時間。 3.可以根據用戶的操作，動態的創建頁面。 4使用JavaScript可以通過設置cookie存儲在瀏覽器上的一些臨時信息。
看完了這篇文章，相信你對“Javascript Dom元素獲取和添加的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
