Dom概念 Dom

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

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

Dom 樹：簡單來說，一棵 Dom 樹是由很多節點組成的。在根節點 HTML 的基礎上，其余節點都是子節點。構成樹的數據結構是 Dom 樹。

Dom節點操作

那么我們為什么要得到節點呢?節點能做什么呢?

1. 尋找元素

2.設置元素屬性值

3.風格元素

4. 創建/刪除元素

5.事件的觸發

等一下。

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

如何獲取元素

 　　　　　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

節點類型 nodeType & 節點名稱 nodeName & 節點值 nodeValue

要獲取節點的類型和名稱，值需要先獲取對應的節點。這里是我的html標簽。

節點主要是文本節點、評論節點、元素節點

 　　<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

節點的操作

同樣，我用名為 ids 的 ID 編寫的 div 標簽演示了節點的工作方式

          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

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

節點操作 - 添加

1.創建元素節點：document.createElement(字符串的標簽簽名)

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

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

4.向標簽添加文本：父容器.textContent ='你要添加的內容'

5.插入標簽：父Container.insertBefore

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

克隆節點

Deep Boolean==false 淺拷貝只拷貝元素，不拷貝內容和子元素

深度布爾==真。Deep Copy 允許您復制元素及其內容，以及它們的子元素

         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)

節點操作-刪除

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

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

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

快速清除所有子元素：element. 內部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  

節點操作 - 更改

父容器.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元素(標簽)屬性的操作

DOM 元素概念

任何 DOM 元素都有兩個屬性，一個是對象屬性，另一個是標簽屬性

1.調用標簽上寫的屬性標簽屬性

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

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

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

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

注意：屬性名稱不能命名為駝背。通常它們通過區分兩個詞來命名：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

元素節點樣式的操作

         // 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
         }
         */

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