国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關于DOM的問題筆記

FullStackDeveloper / 2046人閱讀

摘要：實時可以傳參返回包括了所有名字符合指定條件的元素實時可以傳參用于選擇擁有屬性的元素比如和等返回匹配指定屬性的元素節點。返回位于頁面指定位置最上層的子節點。此外，使用可以防止攻擊。而自身不在存在于創建它時所在的位置。

1. 獲取某個 dom 元素的方式 
//節點集合屬性（元素節點選取）
document.all    //返回文檔中所有元素
document.links  //返回當前文檔的所有a元素
document.forms  //返回頁面中所有表單元素
document.images  //返回頁面中所有圖片元素
document.embeds  //返回網頁中所有嵌入對象
document.scripts  //返回當前文檔的所有腳本
document.styleSheets  //返回當前網頁的所有樣式表（數組；實時的）

//查找方法
Document（/Element）.querySelector(selectors)   //接受一個CSS選擇器作為參數，返回第一個匹配該選擇器的元素節點。
document（/Element）.querySelectorAll(selectors)  //接受一個CSS選擇器作為參數，返回所有匹配該選擇器的元素節點。（不實時，只是快照）
document（/Element）.getElementsByTagName(tagName)  //返回所有指定HTML標簽的元素。（實時；可以傳參 *）
document（/Element）.getElementsByClassName(className)   //返回包括了所有class名字符合指定條件的元素（實時；可以傳參 *）
document（/Element）.getElementsByName(name)   //用于選擇擁有name屬性的HTML元素（比如
、、、、和等）
document.getElementById(id)   //返回匹配指定id屬性的元素節點。
document.elementFromPoint(x,y)  //返回位于頁面指定位置最上層的Element子節點。

Element.children   //包括當前元素節點的所有子元素
Element.childElementCount   //返回當前元素節點包含的子HTML元素節點的個數
Element.firstElementChild  //返回當前節點的第一個Element子節點  
Element.lastElementChild   //返回當前節點的最后一個Element子節點  
Element.nextElementSibling  //返回當前元素節點的下一個兄弟HTML元素節點
Element.previousElementSibling  //返回當前元素節點的前一個兄弟HTML節點
Element.offsetParent   //返回當前元素節點的最靠近的、并且CSS的position屬性不等于static的父元素。（為static，它們也被當做offsetPatent）
2.    說一下 offsetwidth clientwidth 和 scrollwidth 的區別
Element.offsetWidth    //返回元素的水平寬度(包含border,padding和內容；同elm.getBoundingClientRect().width)
Element.scrollWidth  //返回滾動元素節點的總寬度
Element.clientWidth   //返回元素節點可見部分的寬度（只包含padding和內容高度）

3.    如何獲取一個元素的 css 類
Element.classList  //返回當前元素節點的所有class集合
element.getAttribute("class")
Element.className  //獲取元素節點的類名

4.    利用原生 dom 怎么獲取某個元素的樣式
document.styleSheets  //返回當前網頁的所有樣式表（數組；實時的）
Element.style  //返回元素節點的行內樣式，返回CSSStyleDeclaration對象
element.style.cssText //用來讀寫或刪除整個style屬性（內聯）
element.style.getPropertyValue(property)  //獲取css內聯屬性
element.getAttribute("style")

styleElement(/linkElement).sheet.cssRules[0].style
//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName] 
window.getComputedStyle(el,null).getPropertyValue(attrName)
//偽類
window.getComputedStyle(el,":after")[attrName]
//getComputeStyle()返回一個只讀的類似style的CSSStyleDeclaration對象

5.    上一個問題的 getcomputedstyle 和 直接用 style  是有區別的
Style屬性值只包含HTML中style屬性定義的CSS。
getComputedStyle（）可獲得最終應用在元素上的所有CSS屬性對象，包括內聯樣式表單、外部樣式表單及瀏覽器樣式表單級聯樣式。
getComputedStyle（）返回值只讀，而style可修改。
getComputedStyle（）返回的顏色值格式永遠都是rgb(#,#,#)

6.    如何在某個位置插入一個元素？
Node.appendChild(node)   //向節點添加最后一個子節點，DOM或documentFragment
Node.insertBefore(newNode,oldNode)  // 在指定子節點之前插入新的子節點
//解析HTML字符串，然后將生成的節點插入DOM樹的指定位置。
Element.insertAdjacentHTML(where, htmlString); 
Element.insertAdjacentHTML("beforeBegin", htmlString); // 在該元素前插入  
Element.insertAdjacentHTML("afterBegin", htmlString); // 在該元素第一個子元素前插入 
Element.insertAdjacentHTML("beforeEnd", htmlString); // 在該元素最后一個子元素后面插入 
Element.insertAdjacentHTML("afterEnd", htmlString); // 在該元素后插入

7.    innerHtml outerHtml innerText outerText textContent nodeValue區別
Element.innerHTML   //返回該元素包含的HTML代碼，可讀寫
Element.outerHTML  //返回指定元素節點的所有HTML代碼，包括它自身和包含的的所有子元素，可讀寫
Node.textContent  //返回當前節點和它的所有后代節點的文本內容，可讀寫
Node.nodeValue  //返回Text或Comment節點的文本值，只讀。對于文檔節點來說, nodeValue返回null. 對于text, comment, 和 CDATA 節點來說, nodeValue返回該節點的文本內容. 對于 attribute 節點來說, 返回該屬性的屬性值.
HTMLElement.outerText  //是一個非標準的屬性。作為一個得到器，它返回相同的值作為Node.innerText. 作為一個設置器，它將刪除當前節點并將其替換為給定的文本。

textContent與innerText的區別
Internet Explorer 引入了 node.innerText。意圖類似，但有以下區別：
textContent 會獲取所有元素的內容，包括                               
           
        
       
    
    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    








        

            

              
              
            

             
        

    






          
<