JavaScript DOM 對(duì)象深入了解
更新時(shí)間：2016年07月20日 10:24:35 投稿：jingxian
下面小編就為大家?guī)硪黄狫avaScript DOM 對(duì)象深入了解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
什么叫DOM，DOM是文檔對(duì)象模型(Document Object Model，是基于瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺(tái)的推薦標(biāo)準(zhǔn)，每個(gè)瀏覽器都有一些細(xì)微的差別，其中以Mozilla的瀏覽器最與標(biāo)準(zhǔn)接近。單純的Javascript要結(jié)合DOM才能做DHTML編程，才能做出漂亮的效果、應(yīng)用于WEB。這點(diǎn)幾乎與其它的語言無異，正如C/C++需要庫支持是一樣的道理。否則就是單純的在語法上做研究了。我們最為關(guān)心的是，DOM把網(wǎng)頁和腳本以及其他的編程語言聯(lián)系了起來。DOM屬于瀏覽器，而不是JavaScript語言規(guī)范里的規(guī)定的核心內(nèi)容。
查找元素
1、直接查找
| 方法名 | 描述 |
| getElementById(id) (document) | 獲取有指定惟一ID屬性值文檔中的元素 |
| getElementsByTagName_r(name) | 返回當(dāng)前元素中有指定標(biāo)記名的子元素的數(shù)組 |
| document.getElementsByClassName | 根據(jù)屬性獲取標(biāo)簽集合 |
| getAttribute(name) | 返回元素的屬性值，屬性由name指定 |
1>document.getElementById('id')
<body>
<div id="zhang">
不帥
</div>
<script type="text/javascript">
var i = document.getElementById('zhang'); //查找指定的id
i.innerText = '很帥'; //innerText修改指定的字符串
</script>
</body>
顯示效果，當(dāng)我們打開IE的時(shí)候不帥就會(huì)被修改為很帥
2>getElementsByTagName_r(name)
<body>
<div name="zhang">
不帥
</div>
<script type="text/javascript">
var i = document.getElementByTagNmae('zhang'); //查找指定的name名
i.innerText = '很帥'; //innerText修改指定的字符串
</script>
</body>
其顯示效果一樣
3>document.getElementsByClassName
<body>
<div class="zhang">
不帥
</div>
<script type="text/javascript">
var i = document.getElementClassName('zhang'); //查找指定的class名
i.innerText = '很帥'; //innerText修改指定的字符串
</script>
</body>
2、間接查找
| 屬性名 | 描述 |
| childNodes | 返回當(dāng)前元素所有子元素的數(shù)組 |
| childNodes | 返回當(dāng)前元素的所有子元素 |
| firstChild | 返回當(dāng)前元素的第一個(gè)下級(jí)子元素 |
| lastChild | 返回當(dāng)前元素的最后一個(gè)子元素 |
| nextSibling | 返回緊跟在當(dāng)前元素后面的元素 |
| previousSibling | 返回緊跟在當(dāng)前元素前面的元素 |
| parentElement | 返回其父節(jié)點(diǎn)標(biāo)簽元素 |
| children | 返回其所有子標(biāo)簽 |
| firstElementChild | 返回第一個(gè)子標(biāo)簽元素 |
| lastElementChild | 返回最后一個(gè)子標(biāo)簽元素 |
| nextElementtSibling | 返回下一個(gè)兄弟標(biāo)簽元素 |
| previousElementSibling | 返回上一個(gè)兄弟標(biāo)簽元素 |
有了W3C DOM，就能編寫簡單的跨瀏覽器腳本，從而充分利用XML的強(qiáng)大功能和靈活性，將XML作為瀏覽器和服務(wù)器之間的通信介質(zhì)。
操作元素
1、動(dòng)態(tài)創(chuàng)建內(nèi)容時(shí)所用的W3C DOM屬性和方法
| 屬性/方法 | 描述 |
| document.createElement_x(tagName) | 文檔對(duì)象上的createElement_x方法可以創(chuàng)建由tagName指定的元素。如果以串div作為方法參數(shù)，就會(huì)生成一個(gè)div元素 |
| document.createTextNode(text) | 文檔對(duì)象的createTextNode方法會(huì)創(chuàng)建一個(gè)包含靜態(tài)文本的節(jié)點(diǎn) |
| <element>.appendChild(childNode) | appendChild方法將指定的節(jié)點(diǎn)增加到當(dāng)前元素的子節(jié)點(diǎn)列表（作為一個(gè)新的子節(jié)點(diǎn)）。 |
| <element>.setAttribute(name, value) | 這些方法分別獲得和設(shè)置元素中name屬性的值 |
| <element>.insertBefore(newNode, targetNode) | 將節(jié)點(diǎn)newNode作為當(dāng)前元素的子節(jié)點(diǎn)插到targetNode元素前面 |
| <element>.removeAttribute(name) | 這個(gè)方法從元素中刪除屬性name |
| <element>.removeChild(childNode) | 這個(gè)方法從元素中刪除子元素childNode |
| <element>.replaceChild(newNode, oldNode) | 這個(gè)方法將節(jié)點(diǎn)oldNode替換為節(jié)點(diǎn)newNode |
| <element>.hasChildnodes() | 這個(gè)方法返回一個(gè)布爾值，指示元素是否有子元素 |
2、標(biāo)簽內(nèi)容
innerText 獲取標(biāo)簽文本內(nèi)容 innerHTML 獲取HTML內(nèi)容 value 獲取值，即form提交表單的值
即實(shí)例如下：
<div class="zhang">1111</div>
<div class="yan">2222</div>
<input class="lin" type="text" value="張巖林">
<script>
document.getElementsByClassName("zhang").innertext = 123; // 獲取類名為zhang的標(biāo)簽并把內(nèi)容改為123
document.getElementsByClassName("yan").innerHTML = 456; //獲取類名為yan的標(biāo)簽并把內(nèi)容改為456
document.getElementsByClassName("lin").value = "張巖林很帥"; //獲取類名為lin的標(biāo)簽并把內(nèi)容改為張巖林很帥
</script>
3、屬性
attributes // 獲取所有標(biāo)簽屬性 setAttribute(key,value) // 設(shè)置標(biāo)簽屬性 getAttribute(key) // 獲取指定標(biāo)簽屬性
通過自定義屬性可以做一個(gè)全選，反選，取消選擇的案例，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="button" value="全選" onclick="Checkall();">
<input type="button" value="取消" onclick="Cancleall();">
<input type="button" value="反選" onclick="recvall();">
</div>
<div id = "i1">
<ul>
<li><input type="checkbox" value="1" class="c1">籃球</li>
<li><input type="checkbox" value="2" class="c1">足球</li>
<li><input type="checkbox" value="3" class="c1">排球</li>
</ul>
</div>
<script>
function Checkall() {
var b = document.getElementsByClassName("c1");
for (var i = 0 ;i < b.length;i++){
var check = b[i];
check.checked = true
}
}
function Cancleall() {
var b = document.getElementsByClassName("c1");
for (var i = 0 ;i < b.length;i++){
var check = b[i];
check.checked = false
}
}
function recvall() {
var b = document.getElementsByClassName("c1");
for (var i = 0 ;i < b.length;i++){
var check = b[i];
if (check.checked){
check.checked = false
}else {
check.checked = true
}
}
}
</script>
</body>
</html>
全選、反選、取消案例
注：onclick是屬于點(diǎn)擊事件，后面會(huì)提到
4、class操作
className // 獲取所有類名 classList.remove(cls) // 刪除指定類 classList.add(cls) // 添加類
這個(gè)東西的用處很大，比如京東里面，當(dāng)我們鼠標(biāo)放到全部商品的時(shí)候，下面就出現(xiàn)好多商品，其商品是屬于隱藏的，觸發(fā)事件以后他才顯示出來，其中間的操作就是定義了一個(gè)css隱藏屬性，鼠標(biāo)放上去后，移除CSS隱藏屬性；鼠標(biāo)移走又把隱藏屬性給添加上去。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>隱藏</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<span onmouseover="mouOver();" onmouseout="mouOut();">放這上面有東西出來，不放東西又消失</span>
<div class="hide" id = "zhangyanlin" style="font-size: 60px">張巖林好帥</div>
<script>
function mouOver() {
document.getElementById("zhangyanlin").classList.remove("hide");
}
function mouOut() {
document.getElementById("zhangyanlin").classList.add("hide");
}
</script>
</body>
</html>
來個(gè)案例醒醒腦
5、標(biāo)簽操作
我們可以通過dom創(chuàng)建標(biāo)簽，添加到指定位置，下面給大家舉兩種方法來操作標(biāo)簽
// 方式一
var zhang = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",zhang);
xxx.insertAdjacentElement('afterBegin',document.createElement('a'))
//注意：第一個(gè)參數(shù)只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// 方式二
var tag = document.createElement('div')
xxx.appendChild(tag) //往后追加一個(gè)div元素
xxx.insertBefore(tag,xxx[1]) //插到指定位置，可根據(jù)索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>
<input type="text" />
<input type="button" value="添加" onclick="AddElement(this);" />
</div>
<div style="position: relative;">
<ul id="commentList">
<li>alex</li>
<li>eric</li>
</ul>
</div>
</div>
<script>
function AddElement(ths) {
// 獲取輸入的值
var val = ths.previousElementSibling.value;
ths.previousElementSibling.value = "";
var commentList = document.getElementById('commentList');
//第一種形式，字符串方式
//var str = "<li>" + val + "</li>";
// 'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// beforeEnd內(nèi)部最后
// beforeBegin 外部上邊
//afterBegin 內(nèi)部貼身
//afterEnd 外部貼墻
//commentList.insertAdjacentHTML("beforeEnd",str);
//第二種方式，元素的方式
var tag = document.createElement('li');
tag.innerText = val;
var temp = document.createElement('a');
temp.innerText = '百度';
temp.;
tag.appendChild(temp);
// commentList.appendChild(tag);
commentList.insertBefore(tag,commentList.children[1]);
}
</script>
</body>
</html>
添加標(biāo)簽操作案例
6、樣式操作
<body>
<div id = i1>張巖林很帥</div>
<script>
var obj = document.getElementById('i1');
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
</script>
</body>
效果如下：
來個(gè)案例吧，光看知識(shí)點(diǎn)多沒勁，我們經(jīng)常會(huì)看到輸入框里面有那種顏色比較暗的字體，提示你讓你輸入東西，當(dāng)你點(diǎn)進(jìn)去的時(shí)候他就消失了，很神奇的操作，他就是通過dom來實(shí)現(xiàn)的，廢話不多說直接擼碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bb{
color: #9a9a9a;
}
.aa{
color: black;
}
</style>
</head>
<body>
<input class="bb" value="請(qǐng)輸入內(nèi)容" onfocus="inpAtu(this);" onblur="onBtu(this);">
<script>
function inpAtu(ths) {
ths.className = "aa";
var text = ths.value;
if (text == "請(qǐng)輸入內(nèi)容"){
ths.value = "";
}
}
function onBtu(ths) {
var text = ths.value;
if (text == "請(qǐng)輸入內(nèi)容" || text.trim().length == 0){
ths.className = "bb";
ths.value = "請(qǐng)輸入內(nèi)容";
}
}
</script>
</body>
</html>
input輸入框提示
7、位置操作
總文檔高度 document.documentElement.offsetHeight 當(dāng)前文檔占屏幕高度 document.documentElement.clientHeight 自身高度 tag.offsetHeight 距離上級(jí)定位高度 tag.offsetTop 父定位標(biāo)簽 tag.offsetParent 滾動(dòng)高度 tag.scrollTop
看到這些大家有沒有想到網(wǎng)頁右下角有個(gè)返回頂部，一點(diǎn)就返回到上面了，對(duì)沒錯(cuò)就是計(jì)算這些高度；還有當(dāng)你鼠標(biāo)往下拉的時(shí)候，左邊菜單欄相對(duì)應(yīng)的樣式都會(huì)變。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
h1{
padding: 0;
margin: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
width: 980px;
margin: 0 auto;
}
.pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px;
}
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{
}
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
}
.pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
}
.pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
border: 1px solid red;
}
</style>
<body onscroll="ScrollEvent();">
<div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首頁</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div>
</div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog" id="catalog">
<div class="catalog-item" auto-to="function1"><a>第1張</a></div>
<div class="catalog-item" auto-to="function2"><a>第2張</a></div>
<div class="catalog-item" auto-to="function3"><a>第3張</a></div>
</div>
<div class="content" id="content">
<div menu="function1" class="section">
<h1>第一章</h1>
</div>
<div menu="function2" class="section">
<h1>第二章</h1>
</div>
<div menu="function3" class="section">
<h1>第三章</h1>
</div>
</div>
</div>
</div>
<script>
function ScrollEvent(){
var bodyScrollTop = document.body.scrollTop;
if(bodyScrollTop>50){
document.getElementsByClassName('catalog')[0].classList.add('fixed');
}else{
document.getElementsByClassName('catalog')[0].classList.remove('fixed');
}
var content = document.getElementById('content');
var sections = content.children;
for(var i=0;i<sections.length;i++){
var current_section = sections[i];
// 當(dāng)前標(biāo)簽距離頂部絕對(duì)高度
var scOffTop = current_section.offsetTop + 60;
// 當(dāng)前標(biāo)簽距離頂部，相對(duì)高度
var offTop = scOffTop - bodyScrollTop;
// 當(dāng)前標(biāo)簽高度
var height = current_section.scrollHeight;
if(offTop<0 && -offTop < height){
// 當(dāng)前標(biāo)簽添加active
// 其他移除 active
var menus = document.getElementById('catalog').children;
var current_menu = menus[i];
current_menu.classList.add('active');
for(var j=0;j<menus.length;j++){
if(menus[j] == current_menu){
}else{
menus[j].classList.remove('active');
}
}
break;
}
}
}
</script>
</body>
</html>
滾動(dòng)菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-top{
position: fixed;
background-color: #0095bb;
height: 40px;
width: 40px;
bottom: 50px;
right: 40px;
color: whitesmoke;
}
.hide{
display: none;
}
</style>
</head>
<body onscroll="Func();">
<div style="height: 3000px;" id = "i1">
<h1>張巖林</h1>
</div>
<div class="pg-top hide" id = "i2">
<a href="javascript:void(0);" onclick="GoTop();">返回頂部</a>
</div>
<script>
function Func() {
var scrollTop = document.body.scrollTop;
var i1 = document.getElementById("i2");
if (scrollTop>20){
i1.classList.remove("hide")
}else {
i1.classList.add("hide")
}
}
function GoTop() {
document.body.scrollTop = 0;
}
</script>
</body>
</html>
返回頂部
8、其他操作
console.log 輸出框 alert 彈出框 confirm 確認(rèn)框 // URL和刷新 location.href 獲取URL location.href = "url" 重定向 location.reload() 重新加載 // 定時(shí)器 setInterval 多次定時(shí)器 clearInterval 清除多次定時(shí)器 setTimeout 單次定時(shí)器 clearTimeout 清除單次定時(shí)器
給說下定時(shí)器吧，定時(shí)器比較有用，比如當(dāng)我們刪除一個(gè)郵件的時(shí)候，會(huì)發(fā)現(xiàn)彈出一段對(duì)話，郵件已刪除，這個(gè)是單次定時(shí)器，多次定時(shí)器在自己特定需求的時(shí)候，可以用到
// 多次定時(shí)器案例
<input type="button" value="Interval" onclick="Interval();">
<input type="button" value="StopInterval" onclick="StopInterval();">
<script>
function Interval() {
s1 = setInterval(function () {
console.log(123) //持續(xù)輸出123
},500);
s1 = setInterval(function () {
console.log(123)
},500);
}
function StopInterval() {
clearInterval(s1); //清除一個(gè)多次定時(shí)器
}
</script>
單次定時(shí)器
<div>
<input type="button" value="刪除" onclick="Delete();">
<input type="button" value="保留當(dāng)前狀態(tài)" onclick="UnDelete();">
<div id = "status"></div>
</div>
<script>
function Delete() {
document.getElementById("status").innerText = "已刪除";
t1 = setTimeout(Clearstatus,1500);
}
function Clearstatus() {
document.getElementById("status").innerText = "";
}
function UnDelete() {
clearTimeout(t1); //清除完定時(shí)器，他會(huì)一直顯示
}
</script>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
// 普通事件
<button id = "btn1" onclick="func();">按鈕</button>
<script>
var btn = document.getElementById("btn1");
function func() {
alert("普通時(shí)間處理")
}
</script>
// 0級(jí)處理事件
<button id = "btn2">0級(jí)處理按鈕</button>
<script>
var btn = document.getElementById("btn2");
btn.onclick = function () {
alert("0級(jí)處理按鈕")
};
// btn.onclick = null; // 清除事件處理, 多個(gè)事件會(huì)被覆蓋掉，只剩下最后一個(gè)事件
</script>
// 2級(jí)處理事件
<button id = "btn3">2級(jí)處理按鈕</button>
<script>
var btn = document.getElementById("btn3").addEventListener("click",function () {
alert("二級(jí)處理事件1")
});
var btn1= document.getElementById("btn3").addEventListener("click",function () {
alert("二級(jí)處理事件2")
});
//不會(huì)被覆蓋
</script>
<button id = "btn4">完整兼容按鈕</button>
<script>
var btn = document.getElementById("btn4");
if (btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else {
btn.onclick = demo;
}
function demo() {
alert("整合兼容事件處理")
}
</script>
</body>
</html>
事件列表：
| 屬性 | 此事件什么時(shí)候發(fā)生(什么時(shí)候被觸發(fā)) |
| onabort | 圖象的加載被中斷 |
| onblur | 元素失去焦點(diǎn) |
| onchange | 區(qū)域的內(nèi)容被修改 |
| onclick | 當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄（比點(diǎn)擊input標(biāo)簽時(shí)執(zhí)行上面的代碼例子） |
| ondblclick | 當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄 |
| onerror | 在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤 |
| onfocus | 元素獲得焦點(diǎn) |
| onkeydown | 某個(gè)鍵盤按鍵被按下 |
| onkeypress | 某個(gè)鍵盤按鍵被按下并松開 |
| onkeyup | 某個(gè)鍵盤被松開 |
| onload | 一張頁面或一副圖片完成加載 |
| onmousedown | 鼠標(biāo)按鈕被按下 |
| onmousemove | 鼠標(biāo)移動(dòng)過來后 |
| onmouseout | 鼠標(biāo)從某個(gè)元素移開 |
| onmouseover | 鼠標(biāo)移動(dòng)到某個(gè)元素之上 |
| onmouseup | 鼠標(biāo)按鍵被松開 |
| onreset | 重置按鈕被點(diǎn)擊 |
| onresize | 窗口或框架被重新調(diào)整大小 |
| onselect | 文本被選中 |
| onsubmit | 確認(rèn)按鈕被點(diǎn)擊 |
| onunload | 用戶退出頁面 |
注：一個(gè)標(biāo)簽可以綁定多個(gè)事件，this標(biāo)簽當(dāng)前正在操作的標(biāo)簽，event封裝了當(dāng)前事件的內(nèi)容。
來幾個(gè)案例吧，不然看完了感覺跟沒看一個(gè)樣
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
}
ul li{
float: left;
background-color: #038CAE;
color: white;
padding: 15px 20px;
}
.clearfix:after{
display: block;
content: '.';
height: 0;
visibility: hidden;
clear: both;
}
.hide{
display: none;
}
.tab-menu{
border: 1px solid #dddddd;
}
.tab-menu .title{
background-color: #dddddd;
}
.tab-menu .title .active{
background-color: white;
color: black;
border-top: 2px solid red;
}
.tab-menu .content{
border: 1px solid #dddddd;
min-height: 150px;
}
</style>
</head>
<body>
<div style="width: 960px;margin: 0;padding: 0">
<div class="tab-menu">
<div class="title clearfix">
<ul>
<li target = "h1" class="active" onclick="Show(this);">價(jià)格趨勢</li>
<li target = "h2" onclick="Show(this);">市場分布</li>
<li target = "h3" onclick="Show(this);">其他</li>
</ul>
</div>
<div id = "content" class="content">
<div con = "h1">content1</div>
<div con = "h2" class="hide">content2</div>
<div con = "h3" class="hide">content3</div>
</div>
</div>
</div>
<script>
function Show(ths) {
var target = ths.getAttribute('target');
ths.className = 'active';
var brother = ths.parentElement.children;
for (var i=0;i<brother.length;i++){
if (ths == brother[i]){
}else {
brother[i].removeAttribute("class");
}
}
var content = document.getElementById("content").children;
for (var j=0;j<content.length;j++){
var current_content = content[j];
var con = current_content.getAttribute("con");
if (con == target){
current_content.classList.remove("hide");
}else {
current_content.className = "hide";
}
}
}
</script>
</body>
</html>
標(biāo)簽菜單案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="Func();" value="點(diǎn)我啊" />
<div id="i1" >
<div class="c1">123</div>
<div class="c1" alex="sb">123</div>
<div class="c1">123</div>
<div class="c1" alex="sb">123</div>
<div class="c1" alex="sb">123</div>
<div class="c1">123</div>
<div class="c1" alex="sb">123</div>
<div class="c1">123</div>
<!--<input type="text">-->
<!--<input type="password">-->
<!---->
</div>
<script>
function Func() {
// i1
// i1所有孩子,循環(huán)每一個(gè)孩子，判斷如果alex=‘sb'
var i1 = document.getElementById('i1');
var divs = i1.children;
for(var i=0;i<divs.length;i++){
var current_div = divs[i];
var result = current_div.getAttribute('alex');
// console.log(result);
if(result == "sb"){
current_div.innerText = "456";
}
}
}
</script>
</body>
</html>
通過自定義屬性改變?cè)刂?/pre>
以上這篇JavaScript DOM 對(duì)象深入了解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript文檔對(duì)象模型DOM
- JavaScript Dom對(duì)象的操作
- JavaScript 中的文檔對(duì)象模型 DOM
- JavaScript變量Dom對(duì)象的所有屬性
- JS實(shí)現(xiàn)訪問DOM對(duì)象指定節(jié)點(diǎn)的方法示例
- 淺談JS讀取DOM對(duì)象(標(biāo)簽)的自定義屬性
- js基礎(chǔ)之DOM中document對(duì)象的常用屬性方法詳解
- js基礎(chǔ)之DOM中元素對(duì)象的屬性方法詳解
- JavaScript實(shí)現(xiàn)DOM對(duì)象選擇器
- JavaScript——DOM操作——Window.document對(duì)象詳解
- jquery對(duì)象和javascript對(duì)象即DOM對(duì)象相互轉(zhuǎn)換
- js對(duì)象關(guān)系圖 方便dom操作
- javascript DOM對(duì)象的學(xué)習(xí)實(shí)例代碼
- JavaScript操作DOM對(duì)象詳解
相關(guān)文章
這篇文章主要介紹了微信小程序調(diào)用天氣接口并且渲染在頁面過程詳解，今天寫一個(gè)具體的例子，調(diào)用一個(gè)免費(fèi)的天氣接口的api，并且把所獲取的內(nèi)容展示在前端的界面，前端界面與 iView Weapp結(jié)合,需要的朋友可以參考下2019-06-06
微信小程序 動(dòng)態(tài)修改頁面數(shù)據(jù)及參數(shù)傳遞過程詳解
這篇文章主要介紹了微信小程序 動(dòng)態(tài)修改頁面數(shù)據(jù)及參數(shù)傳遞過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
touch.js 拖動(dòng)、縮放、旋轉(zhuǎn) （鼠標(biāo)手勢）功能代碼
這篇文章主要介紹了touch.js 拖動(dòng)、縮放、旋轉(zhuǎn) （鼠標(biāo)手勢)功能,代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS傳值出現(xiàn)中文參數(shù)亂碼的解決方法,涉及javascript針對(duì)編碼的轉(zhuǎn)碼與解碼操作技巧,需要的朋友可以參考下2016-06-06
最近在寫一個(gè)JS代碼壓縮工具的時(shí)候，感受到JS的強(qiáng)大，同時(shí)也讓我頭疼的一陣子（誰叫我是JS菜鳥）。2009-05-05
javascript實(shí)現(xiàn)簡單查找與替換的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)簡單查找與替換的方法,涉及javascript針對(duì)頁面查找與替換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要匯總了JavaScript 常見的繼承方式，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)打磚塊游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了layui導(dǎo)航欄二級(jí)菜單不顯示問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要給大家介紹了關(guān)于JS算法教程之字符串去重與字符串反轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12