【JS學習筆記】DOM基礎-位元組點，父節點

最後更新：2017-01-31 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：應用 offset ie9 之間 charset parent org absolute nbsp

一、DOM基礎

（1）什麼是DOM？DOM，即document，是用來操作頁面上的元素，比如操作div擷取，修改樣式等。是JS的組成部分，還是一套規範。

（2）瀏覽器的支援情況

　　現在主流的瀏覽器有3種，分別是IE,Chrome,Firefox。

　　IE：在IE6-8版本中，對DOM的支援差不多是百分之十幾差不多了，但是到了IE9就有了質的飛躍。

　　Chrome：介於兩者之間，在60%左右，對DOM支援的不是那麼的好也不是那麼的差。

　　Firefox：對於DOM的支援幾乎可以用99%來形容。

二、DOM節點

在CSS階段，我們認為是標籤；

在JS階段，我們認為是元素；

在DOM階段，我們認為是節點。

（1）childNodes

　　擷取子節點

特別注意，在Chrome中和IE9中，版本越高越會出現問題，它們會把空白文本也當做子節點，可是在IE6-8中卻會正常運行，出現正確的子節點數，十分詭異。

文本節點，純文字或者空白文本，比如aaaaa

元素節點，比如<span>aaaaaa</span>

　　nodeType，節點的類型

nodeType==3——>文本節點

nodeType==1——>元素節點

將childNodes和nodeType配合起來使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子節點</title>
<script>
window.onload = function()
{
   var oUl=document.getElementById(‘ul1‘);

   //alert(oUl.childNodes.length);/*在Chrome中，空的文本也會被當做子節點*/
   //nodeType==3——>文本節點
   //nodeType==1——>元素節點
   for(var i=0;i<oUl.childNodes.length;i++)
   {
       //alert(oUl.childNodes[i].nodeType);
       //判斷子節點是不是元素節點
       if(oUl.childNodes[i].nodeType==1)
       {
           oUl.childNodes[i].style.background=‘red‘;
           }
       }
   };
</script>

</head>

<body>
<ul id="ul1">
   <li></li>
    <li></li>

</ul>

aaaaaaaa 文本節點
<span>aaaaaaaa元素節點</span>
</body>
</html>

　　children——非常好用，它只包括元素節點卻不包括文本節點

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子節點</title>
<script>
window.onload = function()
{
   var oUl=document.getElementById(‘ul1‘);

   //alert(oUl.childNodes.length);/*在Chrome中，空的文本也會被當做子節點*/
   //nodeType==3——>文本節點
   //nodeType==1——>元素節點
   /*for(var i=0;i<oUl.childNodes.length;i++)
   {
       //alert(oUl.childNodes[i].nodeType);
       //判斷子節點是不是元素節點
       if(oUl.childNodes[i].nodeType==1)
       {
           oUl.childNodes[i].style.background=‘red‘;
           }
       }*/
   alert(oUl.children.length);
   };
</script>

</head>

<body>
<ul id="ul1">
   <li></li>
    <li></li>

</ul>

aaaaaaaa 文本節點
<span>aaaaaaaa元素節點</span>
</body>
</html>

（2）parentNode，只要是父節點不變，是不會發生變化的

　　例子：點選連結，隱藏整個li

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父節點的應用</title>
<script>
window.onload = function()
{
   var aA=document.getElementsByTagName(‘a‘);

   for(var i=0;i<aA.length;i++)
   {
       aA[i].onclick = function ()
       {
           this.parentNode.style.display="none";/*this指代a的父節點是<li>，則把a所在的li隱藏掉*/
           };
       }
   };
</script>

</head>

<body>
<ul id="ul1">
   <li>aaaaaaa <a href="javascript:;">隱藏</a></li>
    <li>bbbbbbb <a href="javascript:;">隱藏</a></li>
    <li>ccccccc <a href="javascript:;">隱藏</a></li>
    <li>ddddddd <a href="javascript:;">隱藏</a></li>
    <li>eeeeeee <a href="javascript:;">隱藏</a></li>
</ul>

aaaaaaaa 文本節點
<span>aaaaaaaa元素節點</span>
</body>
</html>

（3）offsetParent——和parentNode不同，它是擷取元素用來定位的父級，不一定是前一個父節點，只能是有定位的父節點，可能是上級可能是上上級等等

　　擷取元素在頁面上的實際位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>offsetParent</title>
<style>
#div1{
   width:200px;
   height:200px;
   background-color:#CCC;
   margin:100px;
   position:relative;
   }
#div2{
   width:100px;
   height:100px;
   background-color:red;
   position:absolute;
   left:50px;
   top:50px;
   }
</style>
<script>
window.onload = function ()
{
   var oDiv2=document.getElementById(‘div2‘);

   alert(oDiv2.offsetParent);
   };
</script>
</head>

<body>
   <div id="div1">
       <div id="div2"></div>
    </div>
</body>
</html>

【JS學習筆記】DOM基礎-位元組點，父節點

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

【JS學習筆記】DOM基礎-位元組點，父節點

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support