JavaScript學習筆記系列2:Dom操做(一)

時間 2019-12-07

標籤 javascript 學習筆記系列 dom 欄目 JavaScript 简体版

原文原文鏈接

一.什麼是Dom?javascript

　　DOM------>Document Object Model 直接翻譯就是文檔對象模型。css

　　DOM------>定義了表示和修改文檔所需的對象、這些對象的行爲和屬性以及這些對象之間的關係。DOM對象即爲宿主對象，由瀏覽器廠商定義，用來操做html和css功能的一類對象的集合。也有人稱DOM是對HTML以及XML的標準編程接口。說白了就是類型C#對象集合。舉個例子 I/0,I/O包含了不少操做文件和流的對象。意思是同樣的。html

二.如何使用Dom?java

　　　1.查看方法。docment.getElementsById()。經過Id獲取元素。下面代碼實操。node

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="MyDiv">
        一小時小超人很帥！
    </div>
<script type="text/javascript">
        var div=document.getElementById('Only')
</script>
</body>
</html>

定義了一個div變量,而且經過Id取到Div。接下來在控制檯看一下效果。編程

我輸出div這個變量就顯示了div。在IE8如下的瀏覽器id是不區分的大小寫。數組

除了getElementById,還有好多個方法。我下面列舉下。瀏覽器

document.getElementById() //元素id 在Ie8如下的瀏覽器，不區分id大小寫，並且也返回匹配name屬性的元素dom

getElementsByTagName() // 標籤名學習

getElementsByName(); //IE不支持需注意，只有部分標籤name可生效（表單，表單元素，img，iframe）

getElementsByClassName() // 類名 -> ie8和ie8如下的ie版本中沒有，能夠多個class一塊兒

querySelector() // css選擇器在ie7和ie7如下的版本中沒有

querySelectorAll() // css選擇器在ie7和ie7如下的版本中沒有

簡單說下querySelector 和 querySelectorAll

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div clas="MyDiv">
            一小時小超人很酷！
        </div>
    <div id="MyDiv">
        一小時小超人很帥！
    </div>

<script type="text/javascript">
        
        var div=document.querySelector('.MyDiv')

</script>
</body>
</html>

querySelector寫法和Css選擇器的寫法同樣。

querySelector和querySelectorAll的區別是一個返回單個,一個返回的是類數組。若是querySelector知足多個只返回第一個。

2.上面的操做是獲取了節點。接下來說講節點有哪些操做。
   遍歷節點樹:
　　parentNode -> 父節點  (最頂端的parentNode爲#document);
　　childNodes ->子節點們
　　firstChild ->第一個節點
　　lastChild ->最後一個節點
   nextSibling->最後一個兄弟節點
　　previousSibling->前一個兄弟節點。
　　上面我列舉的都是節點的屬性。咱們整個html文檔是一個樹型的。經過上面的操做我能夠遍歷整個樹,意思就是能夠找個整個樹上的任意的節點,而且操做。

　　遍歷元素節點樹:
　　parentElement->返回當前元素的父元素節點。(IE不兼容)
　　children->返回當前元素的子節點元素
   node.childElementCount  === node.children.length當前元素節點的子元素節點個數(IE不兼容)
　　firstElementChild -> 返回的是第一個元素節點(IE不兼容)
　　lastElementChild->返回的是最後一個元素節點(IE不兼容)
　　nextElementSibling/previousElementSiling->返回後一個/前一個兄弟元素節點。（IE不兼容）
　
`　上面2個一個是遍歷節點樹,一個是遍歷元素節點樹。這個兩個有什麼區別呢?首先要了解一個概念就是節點:什麼節點？節點定義不單單是指咱們的html標籤,文字,註釋都算是節點,還有屬性啦好比id,class這些都是。因此二者區別都是知道了。遍歷節點,不只包含html標籤。還包含其餘的東西。
　 而遍歷元素節點。則是遍歷咱們真正須要的元素節點。因此從使用上。咱們的遍歷元素節點是方便的。可是！注意這裏的可是。實際咱們使用的是遍歷節點樹。這是爲何呢？爲何遍歷元素節點更方便。由於IE不兼容。只要不兼容。就很差用了。爲何IE這麼不同。
由於那個時期。瀏覽器是IE的天下。市場份額佔了78成。因此他就牛逼啊。就不遵照規則，玩本身的一套。不事後來隨着市場份額減小。他也變老實了。下面代碼演示如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="MyDiv">一小時小超人很酷！
     </div>
    <div id="MyDiv1">
        一小時小超人很帥！
    </div>

<script type="text/javascript">
        
        var div=document.getElementById('MyDiv1')
        var div1=div.previousElementSibling

</script>
</body>
</html>

既然咱們實際中用的是遍歷節點樹。那怎麼區分這個節點是咱們想要的仍是不是咱們想要的呢?dom在節點上爲咱們提供了type屬性讓咱們進行區分

節點的類型

　　元素節點 —— 1

　　屬性節點 —— 2

　　文本節點 —— 3

　　註釋節點 —— 8

　　document —— 9

　　DocumentFragment —— 11

　獲取節點類型 nodeType

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="MyDiv">一小時小超人很酷！
     </div>
    <div id="MyDiv1">
        一小時小超人很帥！
        <span>1</span>
        <span><a href=""></a></span>
        <a href=""></a>
        <p></p>
    </div>

<script type="text/javascript">
        
        var div=document.getElementById('MyDiv1')
        var div1=div.previousElementSibling
        var Elements=div.childNodes;
        var ElemenList=[];
        for(var i=0;i<Elements.length;i++)
        {
            if(Elements[i].nodeType==1)
            {   
                ElemenList.push(Elements[i])
            }
        }

</script>
</body>
</html>