Dom屬性的使用方法

這次帶給大家Dom屬性的使用方法，Dom屬性使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

一、javascript的三大核心

　　1.ECMAScript js的語法標準

　　2.DOM Document object Model文件物件模型，提供的方法可以讓js操作html標籤

　　3.BOM Browser Object Model 瀏覽器物件模型，提供的方法讓js可以操作瀏覽器

注意：1. js裡最大的boss是window，document只是window下的一個物件

1. document.documentElement 這個東西可以拿到html

                document(在文档里，document是老大)
                       |
                      html
                      /  \
                     /    \
                    /      \
                   body    head
                   /       / | \
                  /       /  |  \
                 /       /   |   \
               / | \   meta title  style...
              /  |  \
             /   |   \
            p  p   ul...
            /
          /
          a

二、DOM的屬性

js ---> DOM --> html

　　js透過DOM去操作html標籤

1. childNodes 傳回目前對像下的所有子節點對象，會傳回文字節點

注意： 在ie8下只會傳回元素節點

1. nodeType 傳回節點類型，元素節點回傳1 文字節點回傳3 註解節點回傳8

2. #children 傳回物件下所有子元素節點，且沒有相容問題

3. firstChild 傳回第一個子節點，在IE8跟childNodes一樣的表現

1. #lastChild 傳回最後一個子節點同上

1. firstElementChild 傳回最後一個元素節點，不相容於IE8

1. nextSibling 下一個兄弟節點在主流的瀏覽器，可能會拿到除了元素節點以外的節點，在IE8裡，只會回到元素節點，如果沒有就返回null

2. previousSibling 上一個兄弟節點同上

3. nextElementSibling 下一個兄弟元素節點如果沒有回傳null 不相容IE678

1. #previousElementSibling 上一個同上

2. parentNode * 傳回父節點沒有相容性

3. #offsetParent 回傳定位父級，如果都沒找到，最後回傳body上，沒有相容問題

　　13.nodeName 傳回標籤的建構器標籤名

大寫字母

三、DOM的一些方法

　　createElement('p')

　　　　這個裡面是標籤

##　　　　這個裡面是標籤

新建元素節點，需要接受一個參數，參數就是需要新建的標籤。

　　createTextNode（）

　　　　新文字節點

　　createComment（）

　　　　　createComment（）

　　　　節點操作節#1 　　新增元素節點

　　　　1. 父級.appendChild(子節點)

　　　　把子節點加入到父級的所有子元素元素後#追加一個節點

　　2. 父級.insertBefore(子節點, 指定的子節點)

　　　　加入到指定的節點前面

1. #父級.removeChild(需要刪除的節點)

　　1.複製節點cloneNode

　　　　複製節點， 複製母體.cloneNode()

##　複製節點，複製母體.cloneNode()

　　　　函數接收一個參數，這個參數是一個布林值，預設false，淺複製， true深度複製######　　　　淺複製：只複製標籤###

　　　　深度複製：把跟這個標籤物件相關的一些標籤的行內的資訊一起複製，不會複製js裡的自訂屬性。

　　這是我對dom學習的筆記，如果能夠幫助到你，我會非常高興。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JavaScript之優化DOM

#微信小程式怎麼實作資料雙向綁定
JavaScript的字串怎麼使用

以上是Dom屬性的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！