Dom概念 Dom

在HTML教程中大家會遇到Dom，Document Object模型是一套完整的操作文檔的方法——Document——html，document中的對象，dom中的頂級對象，window中的對象，可以說是最好的。

Dom Node：構(gòu)成整個html流程的所有步驟，相當(dāng)于構(gòu)成整個網(wǎng)頁的所有標(biāo)簽、文本、屬性、注釋——構(gòu)成網(wǎng)頁的每一部分內(nèi)容都被視為一個節(jié)點，而整個網(wǎng)頁是由很多節(jié)點組成的。節(jié)點主要有：(標(biāo)簽、文本、屬性、評論)/元素節(jié)點(標(biāo)簽)，因為在實際操作中，元素節(jié)點比較重要，所以在獲取或創(chuàng)建的時候一個節(jié)點，你通常對元素節(jié)點進(jìn)行操作，比如注釋節(jié)點，文本節(jié)點使用的相對較少。

Dom 樹：簡單來說，一棵 Dom 樹是由很多節(jié)點組成的。在根節(jié)點 HTML 的基礎(chǔ)上，其余節(jié)點都是子節(jié)點。構(gòu)成樹的數(shù)據(jù)結(jié)構(gòu)是 Dom 樹。

Dom節(jié)點操作

那么我們?yōu)槭裁匆玫焦?jié)點呢?節(jié)點能做什么呢?

1. 尋找元素

2.設(shè)置元素屬性值

3.風(fēng)格元素

4. 創(chuàng)建/刪除元素

5.事件的觸發(fā)

等一下。

所以節(jié)點是非常強大的。涉及的知識比較多，我簡單總結(jié)一下節(jié)點的所有基本操作。

如何獲取元素

 　　　　　console.log(document)  // document
         console.log(document.documentElement) // Obtain html Label
         console.log(document.body)  // Obtain body Label
         console.log(document.head)  // Obtain head Label
         console.log(document.title) // Obtain title Label 
         // Obtained with id Labeled dom Method must be used document call getElementById
         console.log(document.getElementById('id'))  // adopt id 
         //getElementsByTagName This method can be used in addition to document In addition, element calls can be used
         console.log(document.getElementsByTagName('div'))     // By tag name 
         console.log(document.getElementsByClassName('.box'))  // adopt class Name acquisition
         console.log(document.getElementsByName('name'))       // adopt name Name to get
         console.log(document.querySelector('.box'))           // adopt css Selector to get
         console.log(document.querySelectorAll('div'))         // adopt css Selector to get all the labels 
         // Summary: Passed id  and name Get label can only be used document Called,By tag name,class Name, css Selectors can call methods from parent elements to get labels for child elements

節(jié)點類型 nodeType & 節(jié)點名稱 nodeName & 節(jié)點值 nodeValue

要獲取節(jié)點的類型和名稱，值需要先獲取對應(yīng)的節(jié)點。這里是我的html標(biāo)簽。

節(jié)點主要是文本節(jié)點、評論節(jié)點、元素節(jié)點

 　　<div id="ids">
         <!-- dom Is Document Object Model -->
         <div class="box">text</div>
         <p>text</p>
         <div class="box" name="1"></div>
         Text Properties
     </div>

          var ids = document.getElementById('ids') 
          var nodes = ids.childNodes // Obtain ids All child nodes under
          console.log(nodes)  　　// Nodes is a list of collections of all child nodes under ids  
          console.log(nodes[0].nodeType)  // Text Node Type 3
          console.log(nodes[0].nodeName)  // Text Node Name  #text
          console.log(nodes[0].nodeValue) // Text node value is the text content and space is the text node 
          console.log(nodes[1].nodeType)  // Comment Node Type 8
          console.log(nodes[1].nodeName)  // Comment Node Name  #comment
         console.log(nodes[1].nodeValue) // Annotation Node Value Is Annotation Content 
         console.log(nodes[3].nodeType)  // Element Node Type 1
         console.log(nodes[3].nodeName)  // Element Node Name Uppercase Label Name
         console.log(nodes[3].nodeValue) // Element Node Value  null

節(jié)點的操作

同樣，我用名為 ids 的 ID 編寫的 div 標(biāo)簽演示了節(jié)點的工作方式

          var ids = document.querySelector('#ids') // Get parent element 
          console.log(ids.childNodes) // Obtain ids All child nodes under
          console.log(ids.children)  // Obtain ids All child element nodes under         
          console.log(ids.firstChild)  // Obtain ids First child node under
          console.log(ids.firstElementChild) // Obtain ids First child element node under                console.log(ids.lastChild) // Obtain ids Last child node under
         console.log(ids.lastElementChild) // Obtain ids Last child element node under 
         console.log(ids.nextSibling)  // Next sibling node
         console.log(ids.nextElementSibling)  //   Next sibling element node 
         console.log(ids.previousSibling)  // Get the last sibling node
         console.log(ids.previousElementSibling)  // Get the last sibling element node // Not only the same label, but also different labels 
         console.log(ids.parentNode)  // Get Parent Node
         console.log(ids.parentElement)  // Get parent element node

節(jié)點的增刪查操作(重要)

節(jié)點操作 - 添加

1.創(chuàng)建元素節(jié)點：document.createElement(字符串的標(biāo)簽簽名)

2.創(chuàng)建文本節(jié)點：document.createTextNode(Text)相當(dāng)于創(chuàng)建一個文件節(jié)點對象，可以直接插入到任何想要的位置

3.追加：父容器.appendChild;在父容器末尾插入子元素

4.向標(biāo)簽添加文本：父容器.textContent ='你要添加的內(nèi)容'

5.插入標(biāo)簽：父Container.insertBefore

6.復(fù)制元素：元素。使用新變量接收克隆節(jié)點(深度布爾)

克隆節(jié)點

Deep Boolean==false 淺拷貝只拷貝元素，不拷貝內(nèi)容和子元素

深度布爾==真。Deep Copy 允許您復(fù)制元素及其內(nèi)容，以及它們的子元素

         var div = document.createElement('div')  // Create labels
          document.body.appendChild(div)    // Place the div element at the end of the body tag  
          // Append: parent container.appendChild(Child Elements);  Insert child elements at the end of parent container
         var span = document.createElement('span')
          div1.appendChild(span)  // take span Labels on div In Label
          span.textContent = 'Hello'  
          // Insert label in div Insert a b Label to span Before Note
         var b = document.createElement('b')
         // Insert Writing Form One:
         div.insertBefore(b,span)
         // Insert Writing Form Two:
         div.insertBefore(b,div.lastElementChild) 
         // Create a text node: document.createTextNode("text") 
         // Place in div Of b In Label
         var text = document.createTextNode('I am a created text node')
         // Insert the created text node into the div Before the first element node in
         div.insertBefore(text,div.firstElementChild)
         console.log(div) 
         // Copy Element Elements.cloneNode(Depth Boolean)
         var b1 = b.cloneNode(false)   // Shallow copy
         var b2 = b.cloneNode(true)    // Deep copy
         console.log(b1,b2)

節(jié)點操作-刪除

Element.remove(); * 元素本身被刪除

頁面標(biāo)簽.remove(); // 指從 DOM 樹中刪除

父容器.removeChild; 父容器刪除子元素

快速清除所有子元素：element. 內(nèi)部HTML = ''。

var b = document.createElement('b')
        document.body.appendChild(b)
        // Copy Element
        var b1 = b.cloneNode(false)
        var b2 = b.cloneNode(false)        
        b1.remove()  // delete b1 element
        var dl = document.createElement('dl')
        document.body.appendChild(dl)
        dl.appendChild(b2)
        dl.removeChild(b2)   // Delete and Repeat dl In b2 element
        // Note that this does not remove the clean need b2 = null
        document.body.appendChild(b2)   // This line of code proves b2 Not deleted clean, cache is still in progress
        b2 = null   // When b2 Assigned to null time b2 Is completely deleted clean, can no longer be called
        // document.body.appendChild(b2)  // b2 cannot be called here and an error has occurred  

節(jié)點操作 - 更改

父容器.replaceChild(新元素，要替換的元素)

         var input = document.createElement('input')  // Establish input Label
         var div = document.createElement('div')      // Establish div Label
         document.body.appendChild(div)      // take div Elements are inserted in body Tail of
         document.body.replaceChild(input,div)   // Replace Element

DOM元素(標(biāo)簽)屬性的操作

DOM 元素概念

任何 DOM 元素都有兩個屬性，一個是對象屬性，另一個是標(biāo)簽屬性

1.調(diào)用標(biāo)簽上寫的屬性標(biāo)簽屬性

2.任何DOM元素都是對象模型，可以自動添加和設(shè)置對象的屬性和值

元素屬性的DOM操作——添加、刪除、更改檢查

元素的屬性 - 添加 - 元素。setAttribute(屬性名，屬性值)

如何添加單個屬性：如表單的checked屬性，設(shè)置時：屬性名('checked','checked') or ('checked',')

注意：屬性名稱不能命名為駝背。通常它們通過區(qū)分兩個詞來命名：toggle-target。屬性值不能大寫，必須是字符串

         var div0 = document.createElement('div')
         document.body.appendChild(div0)
         div0.setAttribute('Slag glow','One Knife 999')  // Add attributes to elements
         div0.setAttribute('class','999')  // Attribute 2 
         // 2: Attributes of the element - Delete - element.removeAttribute(Property Name)         div0.removeAttribute('Slag glow')  // Remove Attribute Slag Glow 
         // 3: Attributes of the element - change - In fact, it is the operation of adding attributes. When attributes do not exist, they are added, when attributes exist, they are modified on the original basis.
         div0.setAttribute('class','666666') 
         // 4:Attributes of the element - Get (view) property values - element.getAttribute(Property Name)
         console.log(div0.getAttribute('class')) 
         // Expand Knowledge 1: DOM Elements are object models and object attributes are not displayed on labels(For example: a Labeled href Properties, img Of src attribute)
         // Extend 1 case:1: img.src = 'The address of the picture you want to put in'  2: a.href = 'The address of the picture you want to put in' 3: div.a = 10 - to div Add a property named a Value is 10
         // Extend 2: DOM All elements are object，So setting attributes is based on object attributes. When conflicting values of label attributes and object attributes are encountered, the value of object attributes is taken as the criterion.
         // Extend 2 cases:
         var ck=document.querySelector("input")
         ck.setAttribute("checked","")  // input Add Attributes checked ，input Set up checked When, is for true == Selected
         ck.checked=false  // When the label attribute value conflicts with the object attribute value, the object attribute value is taken as the criterion. checked Is for false == Trim White Space

元素節(jié)點樣式的操作

         // 1: Label Style - increase
         // Method 1: Increase inline (note inline) style elements by adding attributes.setAttribute(Property Name,Attribute Value)
         var div0 = document.createElement('div')
         document.body.appendChild(div0)
         div0.setAttribute("style","width:50px;height:50px;background-color:red")
         // Method 2: - element.style.The style name you want to add = 'Style Value'
         div0.style.margin = '5px' 
         // 2: Tag Style Acquisition 
         console.log(div0.style.width)  // Only inline styles can be obtained, not internal and external styles
         // Universal Access: getComputedStyle(element)   Inside, outside and inside styles are available
         console.log( getComputedStyle(div0).width) 
         // 3 :Gets the rectangular bounding range of the element ( IE8 Only later)
         // Syntax: Element..getBoundingClientRect()   
         // IE Compatibility method: element.currentStyle.Style Properties
         var res = div0.getBoundingClientRect()
         console.log(res)
         // This method is also an object model with eight attributes, one for each of the following
         /*{
             width,  // offsetWidth
             height, // offsetHeight
             left,   // Distance from the leftmost window to the visible window
             top,    // Distance from the top to the visible window
             right,  // left+width Distance from the far right to the visible window
             bottom, // top+height  Distance from bottom to visible window
             x,      // left  Coordinate X-axis
             y       // top   Coordinate Y-axis
         }
         */

以上就是關(guān)于“HTML中Dom節(jié)點操作詳解”的介紹，大家如果想了解更多相關(guān)知識，可以關(guān)注一下動力節(jié)點Java在線學(xué)習(xí)，里面的課程內(nèi)容細(xì)致全面，很適合沒有基礎(chǔ)的小白學(xué)習(xí)，希望對大家能夠有所幫助。