JavaScript DOM 對象深入了解

更新時(shí)間：2016年07月20日 10:24:35 投稿：jingxian

下面小編就為大家?guī)硪黄狫avaScript DOM 對象深入了解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

什么叫DOM，DOM是文檔對象模型(Document Object Model，是基于瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺的推薦標(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í)候不帥就會被修改為很帥

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è)下級子元素
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、動態(tài)創(chuàng)建內(nèi)容時(shí)所用的W3C DOM屬性和方法

屬性/方法	描述
document.createElement_x(tagName)	文檔對象上的createElement_x方法可以創(chuàng)建由tagName指定的元素。如果以串div作為方法參數(shù)，就會生成一個(gè)div元素
document.createTextNode(text)	文檔對象的createTextNode方法會創(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)擊事件，后面會提到

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è)案例吧，光看知識點(diǎn)多沒勁，我們經(jīng)常會看到輸入框里面有那種顏色比較暗的字體，提示你讓你輸入東西，當(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="請輸入內(nèi)容" onfocus="inpAtu(this);" onblur="onBtu(this);">
 <script>
 function inpAtu(ths) {
  ths.className = "aa";
  var text = ths.value;
  if (text == "請輸入內(nèi)容"){
  ths.value = "";
  }
 }
 function onBtu(ths) {
  var text = ths.value;
  if (text == "請輸入內(nèi)容" || text.trim().length == 0){
  ths.className = "bb";
  ths.value = "請輸入內(nèi)容";
  }
 }
 </script>
</body>
</html>
input輸入框提示

7、位置操作

總文檔高度
document.documentElement.offsetHeight
 
當(dāng)前文檔占屏幕高度
document.documentElement.clientHeight
 
自身高度
tag.offsetHeight
 
距離上級定位高度
tag.offsetTop
 
父定位標(biāo)簽
tag.offsetParent
 
滾動高度
tag.scrollTop

看到這些大家有沒有想到網(wǎng)頁右下角有個(gè)返回頂部，一點(diǎn)就返回到上面了，對沒錯(cuò)就是計(jì)算這些高度；還有當(dāng)你鼠標(biāo)往下拉的時(shí)候，左邊菜單欄相對應(yīng)的樣式都會變。

<!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)簽距離頂部絕對高度
  var scOffTop = current_section.offsetTop + 60;

  // 當(dāng)前標(biāo)簽距離頂部，相對高度
  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>
滾動菜單

<!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í)候，會發(fā)現(xiàn)彈出一段對話，郵件已刪除，這個(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í)器，他會一直顯示
 }
 </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級處理事件
 <button id = "btn2">0級處理按鈕</button>
 <script>
 var btn = document.getElementById("btn2");
 btn.onclick = function () {
  alert("0級處理按鈕")
 };
// btn.onclick = null; // 清除事件處理, 多個(gè)事件會被覆蓋掉，只剩下最后一個(gè)事件
 </script>

 
 
 
 // 2級處理事件
 <button id = "btn3">2級處理按鈕</button>
 <script>
 var btn = document.getElementById("btn3").addEventListener("click",function () {
  alert("二級處理事件1")
 });
 var btn1= document.getElementById("btn3").addEventListener("click",function () {
  alert("二級處理事件2")
 });
 //不會被覆蓋
 </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è)對象時(shí)調(diào)用的事件句柄（比點(diǎn)擊input標(biāo)簽時(shí)執(zhí)行上面的代碼例子）
ondblclick	當(dāng)用戶雙擊某個(gè)對象時(shí)調(diào)用的事件句柄
onerror	在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤
onfocus	元素獲得焦點(diǎn)
onkeydown	某個(gè)鍵盤按鍵被按下
onkeypress	某個(gè)鍵盤按鍵被按下并松開
onkeyup	某個(gè)鍵盤被松開
onload	一張頁面或一副圖片完成加載
onmousedown	鼠標(biāo)按鈕被按下
onmousemove	鼠標(biāo)移動過來后
onmouseout	鼠標(biāo)從某個(gè)元素移開
onmouseover	鼠標(biāo)移動到某個(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>
通過自定義屬性改變元素值

以上這篇JavaScript DOM 對象深入了解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: