Javascript Dom元素獲取和添加詳解
更新時(shí)間：2019年09月24日 11:24:19 作者：---空白---
這篇文章主要介紹了Javascript Dom元素獲取和添加詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
1.Dom元素的獲取
- document.getElementById()：通過(guò)id獲取一個(gè)Dom元素
- document.getElementsByClassName()：通過(guò)class名字獲取一個(gè)或多個(gè)Dom元素（偽數(shù)組）
- document.getElementsByTagName()：通過(guò)標(biāo)簽名字獲取一個(gè)或多個(gè)Dom元素（偽數(shù)組）
- document.querySelector()：獲取指定 CSS 選擇器的一個(gè)元素
- document.querySelectorAll()：獲取指定 CSS 選擇器的多個(gè)元素（偽數(shù)組）
ES6選擇器與其他選中器的區(qū)別：
document.getElementsByTagName()和document.getElementsByClassName()獲取到的都是動(dòng)態(tài)列表
document.querySelectorAll()獲取到的是靜態(tài)列表,Dom結(jié)構(gòu)發(fā)生變化要重新獲取，不然會(huì)出問(wèn)題
<!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
// 動(dòng)態(tài)添加li標(biāo)簽
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元素節(jié)點(diǎn)類(lèi)型
Dom節(jié)點(diǎn)類(lèi)型分3類(lèi)：元素節(jié)點(diǎn),屬性節(jié)點(diǎn),文本節(jié)點(diǎn)
每種節(jié)點(diǎn)都有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="我在哪">我是誰(shuí)</div>
</body>
</html>
<script>
// 獲取元素節(jié)點(diǎn)
var box = document.querySelector('#box')
// 元素節(jié)點(diǎn)的屬性
console.log(box.nodeName);//DIV
console.log(box.nodeType); //1
console.log(box.nodeValue); //一律為null
// 根據(jù)屬性名獲取單個(gè)屬性節(jié)點(diǎn)
var attrTitle = box.getAttributeNode("title")
// 獲取元素屬性的集合(一個(gè)偽數(shù)組對(duì)象)
var box_attributes = box.attributes
// 屬性節(jié)點(diǎn)的屬性
console.log(attrTitle.nodeName);//title
console.log(attrTitle.nodeType); //2
console.log(attrTitle.nodeValue); //"我在哪"
// 獲取box的文本節(jié)點(diǎn)（沒(méi)有專(zhuān)門(mén)的方法用來(lái)獲取文本節(jié)點(diǎn)，但是這個(gè)div的第一個(gè)子節(jié)點(diǎn)就是文本節(jié)點(diǎn)）
var textNode = box.childNodes[0];
// 文本節(jié)點(diǎn)的屬性
console.log(textNode.nodeName);//#text
console.log(textNode.nodeType); //3
console.log(textNode.nodeValue); //"我是誰(shuí)"
</script>
3.獲取Dom元素的子元素，父元素，兄弟元素
通過(guò)children屬性可以獲取當(dāng)前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>
獲取當(dāng)前元素的父元素
parentElement/parentNode這兩個(gè)屬性都可以
<!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的父級(jí)就是body)
var parent = ul.parentElement
var parentNode = ul.parentNode
console.log(parent.nodeName) // BODY
console.log(parentNode.nodeName) // BODY
</script>
獲取當(dāng)前元素的兄弟元素
previousElementSibling屬性：上一個(gè)兄弟元素
nextElementSibling屬性：下一個(gè)兄弟元素
<!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，前者只包含元素節(jié)點(diǎn)，而后者為元素節(jié)點(diǎn)+文本節(jié)點(diǎn)（回車(chē)換行也算是文本節(jié)點(diǎn)）
而previousElementSibling與previousSibling，nextElementSibling與nextSibling也一個(gè)道理
firstChild和lastChild：firstChild等價(jià)于childNodes[0]，lastChild相當(dāng)于childNodes的最后一個(gè)元素
4.DOM元素的添加與移除
添加子元素
appendChild()：將目標(biāo)元素作為子元素添加到當(dāng)前元素的最后面
insertBefore()：將目標(biāo)元素作為子元素添加到當(dāng)前元素中，位置可以自由選擇
<!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')
// 創(chuàng)建li元素
var liNode = document.createElement('li')
liNode.innerHTML = "4"
// 將創(chuàng)建的li元素添加到ul中(最后面)
ul.appendChild(liNode)
// 再創(chuàng)建li元素
var liNode2 = document.createElement('li')
liNode2.innerHTML = "life"
var li_test = document.querySelector('#test')
// 將創(chuàng)建的li元素添加到ul中(li_test的前面)
ul.insertBefore(liNode2,li_test)
</script>
運(yùn)行結(jié)果
<ul> <li>1</li> <li>life</li> <li id="test">2</li> <li>3</li> <li>4</li> </ul>
刪除子元素和替換子元素
removeChild()：刪除子元素
replaceChild()：替換子元素
語(yǔ)法：parent.removeChild(child)
語(yǔ)法：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')
// 獲取要?jiǎng)h除的li元素
var li_test = document.querySelector('#test')
// 刪除子元素
ul.removeChild(li_test)
// 獲取要替換的li元素
var li_replace = document.querySelector('#replace')
// 創(chuàng)建要替換的元素
var newLI = document.createElement('li')
newLI.innerHTML = "replace li tag"
// 替換元素
ul.replaceChild(newLI,li_replace)
</script>
運(yùn)行結(jié)果：
<ul> <li>1</li> <li>replace li tag</li> </ul>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript十六進(jìn)制及二進(jìn)制轉(zhuǎn)化的方法
這篇文章主要介紹了javascript十六進(jìn)制及二進(jìn)制轉(zhuǎn)化的方法,涉及javascript中toString方法的使用技巧,需要的朋友可以參考下2015-05-05
在Twitter上的一些有趣的討論中, 我發(fā)現(xiàn)人們對(duì)于Web應(yīng)用和站點(diǎn)對(duì)javascript的依賴(lài)普遍存在一種疑惑. 這種疑惑一直都存在, 而對(duì)我而言, 這個(gè)問(wèn)題隨著瀏覽技術(shù)的飛躍發(fā)展而集中爆發(fā)了2013-10-10
JavaScript開(kāi)發(fā)簡(jiǎn)單易懂的Svelte實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了JavaScript開(kāi)發(fā)簡(jiǎn)單易懂的Svelte實(shí)現(xiàn)原理的內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-11-11
實(shí)例分析瀏覽器中“JavaScript解析器”的工作原理
本文主要對(duì)javascript解析器的工作原理進(jìn)行實(shí)例分析，具有很好的參考價(jià)值，下面就跟小編一起來(lái)看下吧2016-12-12
微信小程序時(shí)間軸實(shí)現(xiàn)方法示例
這篇文章主要介紹了微信小程序時(shí)間軸實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了微信小程序wx:for語(yǔ)句使用與時(shí)間軸縱向布局相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
js動(dòng)態(tài)修改表格行colspan列跨度的方法
這篇文章主要介紹了js動(dòng)態(tài)修改表格行colspan列跨度的方法,實(shí)例分析了javascript動(dòng)態(tài)修改html中table屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
一文解決微信小程序button、input和image表單組件
在微信小程序開(kāi)發(fā)中,input?用來(lái)實(shí)現(xiàn)文本輸入,如輸入用戶(hù)名密碼等等,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一文解決微信小程序button、input和image表單組件的相關(guān)資料,需要的朋友可以參考下2022-08-08
關(guān)于元素的尺寸(dimensions) 說(shuō)明
在使用JavaScript腳本獲取元素的尺寸時(shí)，有幾個(gè)屬性你需要弄清楚，不然會(huì)很棘手。2011-09-09
Symbol 唯一的用途就是標(biāo)識(shí)對(duì)象屬性，表明對(duì)象支持的功能。 這篇文章給大家介紹ES6 Symbol 的用途，感興趣的朋友跟隨小編一起看看吧2018-10-10
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)之wxs使用教程的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05