JavaScript中dom操作方法示例詳解
前言
DOM（文檔對象模型）操作是基于面向?qū)ο蟮乃枷朐O計的。在瀏覽器中，HTML 文檔被解析為一個由對象組成的樹形結構（即 DOM 樹），每個 HTML 元素、屬性、文本節(jié)點都是一個對象，通過對象的屬性和方法可以實現(xiàn)對頁面內(nèi)容的動態(tài)操作。
一、查找
1.1 獲取元素
getElementById() 通過id獲取元素 獲取符合條件的第一個對象
var obj = document.getElementById("aa")
getElementsByClassName() 根據(jù)class值查找 找到所有符合條件的對象組成的數(shù)組
var arr = document.getElementsByClassName("aa")
getElementsByTagName() 根據(jù)元素名稱查找 找到所有符合條件的對象組成的數(shù)組
var arr = document.getElementsByTagName("div")
querySelector() 根據(jù)元素選擇器查找，獲取符合條件的第一個對象
var obj = document.querySelector(".aa")
querySelectorAll() 根據(jù)元素選擇器查找，找到所有符合條件的對象組成的數(shù)組
var arr = document.querySelectorAll(".aa")
1.2 通過關系查找(Dom節(jié)點)
找父親 parentNode parentElement
找孩子 childNodes(包含元素節(jié)點和文本節(jié)點) children(所有子元素節(jié)點)
第一個孩子 firstChild firstElementChild
最后一個孩子 lastChild lastElementChild
上一個元素 previousSibling previousElementSibling
下一個元素 nextSibling nextElementSibling
二、修改
2.1 改內(nèi)容
| innerText | 以文本形式呈現(xiàn) |
| innerHTML | 解析成標簽 |
| value | 用于修改收集用戶信息的標簽(如input) |
2.1.1 innerText
html文件代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="aa">aa</div>
<input type="text" value="00" class="bb">
</body>
<script type="text/javascript" src="./00.js"></script>
</html>js文件代碼如下：
var obj = document.querySelector(".aa")
obj.innerText="<a>0000000</a>"結果如下：
2.1.2 innerHTML
js代碼如下：
var obj = document.querySelector(".aa")
obj.innerHTML="<a>0000000</a>"結果如下：
2.1.3 value
js代碼如下：
var obj = document.querySelector(".aa")
obj.innerHTML="<a>0000000</a>"
var bb = document.querySelector(".bb")
bb.value="xxxxx"結果如下：
2.2 改屬性
對象.屬性=值
html文件代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.aa{
width:200px;
height:200px;
background-color: aqua;
}
.bb{
width:200px;
height:200px;
background-color:yellow;
}
</style>
<body>
<div class="aa">aa</div>
</body>
<script type="text/javascript" src="./00.js"></script>
</html>結果如下：
js文件代碼如下：
var obj = document.querySelector(".aa")
obj.className="bb"結果如下：
2.3 自定義屬性
setAttribute("屬性名", "屬性值")
getAttribute("屬性名")
html文件代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.aa{
width:200px;
height:200px;
background-color: aqua;
}
.bb{
width:200px;
height:200px;
background-color:yellow;
}
</style>
<body>
<div class="aa">aa</div>
</body>
<script type="text/javascript" src="./00.js"></script>
</html>js文件代碼如下：
var obj = document.querySelector(".aa")
obj.setAttribute("index","1")
console.log(obj.getAttribute("index"))結果如下：
2.4 改樣式
obj.style.屬性名="屬性值"
html文件代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.aa{
width:200px;
height:200px;
background-color: aqua;
}
.bb{
width:200px;
height:200px;
background-color:yellow;
}
</style>
<body>
<div class="aa">aa</div>
</body>
<script type="text/javascript" src="./00.js"></script>
</html>js文件代碼如下：
var obj = document.querySelector(".aa")
obj.style.backgroundColor='red'結果如下：
注：修改樣式時屬性名要采用駝峰式，如 font-size 要變?yōu)閒ontSize。
三、添加
3.1 創(chuàng)建元素
| createElement() | 創(chuàng)建元素 |
| cloneNode() | 復制元素( false淺復制，只復制外殼 true復制全部) |
3.2 添加元素
| appendChild() | 子元素最后位置添加 |
| insertBefore() | 某個子元素前添加 |
| replaceChild() | 替換掉某個子元素 |
3.2.1 appendChild()
html文件代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.aa{
width:200px;
height:200px;
background-color: aqua;
}
.bb{
width:100px;
height:100px;
background-color:rgb(255, 0, 93);
}
</style>
<body>
<div class="aa">
<div class="bb">子元素</div>
</div>
</body>
<script type="text/javascript" src="./00.js"></script>
</html>代碼運行結果：
js文件代碼：
var obj = document.querySelector(".aa")
var bb = document.querySelector(".bb")
var newNode = document.createElement("h2")
console.log(newNode)
newNode.innerText = "新添加的元素"
newNode.className = "xixi"
newNode.style.background = "purple"
obj.appendChild(newNode,bb)結果如下：
3.2.2 insertBefore()
js文件代碼：
var obj = document.querySelector(".aa")
var bb = document.querySelector(".bb")
var newNode = document.createElement("h2")
console.log(newNode)
newNode.innerText = "新添加的元素"
newNode.className = "xixi"
newNode.style.background = "purple"
obj.insertBefore(newNode,bb)結果如下：
注：還可以采用prepend()。
3.2.3 replaceChild()
js代碼如下：
var obj = document.querySelector(".aa")
var bb = document.querySelector(".bb")
var newNode = document.createElement("h2")
console.log(newNode)
newNode.innerText = "新添加的元素"
newNode.className = "xixi"
newNode.style.background = "purple"
obj.replaceChild(newNode,bb)結果如下：
3.2.4 cloneNode()
js文件代碼如下：
var obj = document.querySelector(".aa")
var bb = document.querySelector(".bb")
var newNode = document.createElement("h2")
console.log(newNode)
newNode.innerText = "新添加的元素"
newNode.className = "xixi"
newNode.style.background = "red"
var cc = newNode.cloneNode(true)
obj.replaceChild(cc,bb)結果如下：
五、刪除
找要刪除元素的父級元素，調(diào)用removeChild()方法
html文件代碼同增加中html文件代碼。
js文件代碼如下：
var obj = document.querySelector(".aa")
var bb = document.querySelector(".bb")
obj.removeChild(bb)結果如下：
總結
到此這篇關于JavaScript中dom操作方法的文章就介紹到這了,更多相關js dom操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Fetch?API提供了一個JavaScript接口，用于訪問和操縱HTTP管道的部分。它還提供了一個全局?fetch()方法，該方法提供了一種簡單，合理的方式來跨網(wǎng)絡異步獲取資源。本文將詳解JS如何使用Fetch，感興趣的可以學習一下2022-05-05
柯里化是將接受多個參數(shù)的函數(shù)轉(zhuǎn)換成一系列只接受單個參數(shù)的函數(shù)的過程，而反柯里化是將柯里化函數(shù)轉(zhuǎn)換成接受多個參數(shù)的函數(shù)的過程，本文將帶大家理解 js 中的柯里化與反柯里化,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡易table表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要介紹了JavaScript二叉樹及各種遍歷算法詳情，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了JS簡單驗證上傳文件類型的方法,涉及javascript文件遍歷及字符串截取、匹配等相關操作技巧,需要的朋友可以參考下2017-04-04
JavaScript可以做很多出色的事情，本篇文章給大家整理50+個實用工具函數(shù)，可以幫助你提高工作效率并可以幫助調(diào)試代碼，需要的朋友們下面隨著小編來一起學習學習吧2021-06-06
當用戶勾選顯示明文復選框時，要以明文顯示用戶輸入的密碼，去掉勾選時要變回密文，問題是ie8中是不允許修改input的type屬性2014-09-09
js 與或運算符 || && 妙用，可用于精簡代碼，降低程序的可讀性。2009-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)上下滑動輪播，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript實現(xiàn)簡易計算器功能的兩種方法
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易計算器功能的兩種方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07