亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

關(guān)于DOM的問題筆記

FullStackDeveloper / 2108人閱讀

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

1. 獲取某個 dom 元素的方式
//節(jié)點集合屬性(元素節(jié)點選?。?document.all    //返回文檔中所有元素
document.links  //返回當前文檔的所有a元素
document.forms  //返回頁面中所有表單元素
document.images  //返回頁面中所有圖片元素
document.embeds  //返回網(wǎng)頁中所有嵌入對象
document.scripts  //返回當前文檔的所有腳本
document.styleSheets  //返回當前網(wǎng)頁的所有樣式表(數(shù)組;實時的)

//查找方法
Document(/Element).querySelector(selectors)   //接受一個CSS選擇器作為參數(shù),返回第一個匹配該選擇器的元素節(jié)點。
document(/Element).querySelectorAll(selectors)  //接受一個CSS選擇器作為參數(shù),返回所有匹配該選擇器的元素節(jié)點。(不實時,只是快照)
document(/Element).getElementsByTagName(tagName)  //返回所有指定HTML標簽的元素。(實時;可以傳參 *)
document(/Element).getElementsByClassName(className)   //返回包括了所有class名字符合指定條件的元素(實時;可以傳參 *)
document(/Element).getElementsByName(name)   //用于選擇擁有name屬性的HTML元素(比如
、、、、等) document.getElementById(id) //返回匹配指定id屬性的元素節(jié)點。 document.elementFromPoint(x,y) //返回位于頁面指定位置最上層的Element子節(jié)點。 Element.children //包括當前元素節(jié)點的所有子元素 Element.childElementCount //返回當前元素節(jié)點包含的子HTML元素節(jié)點的個數(shù) Element.firstElementChild //返回當前節(jié)點的第一個Element子節(jié)點 Element.lastElementChild //返回當前節(jié)點的最后一個Element子節(jié)點 Element.nextElementSibling //返回當前元素節(jié)點的下一個兄弟HTML元素節(jié)點 Element.previousElementSibling //返回當前元素節(jié)點的前一個兄弟HTML節(jié)點 Element.offsetParent //返回當前元素節(jié)點的最靠近的、并且CSS的position屬性不等于static的父元素。(為static,它們也被當做offsetPatent) 2. 說一下 offsetwidth clientwidth 和 scrollwidth 的區(qū)別
Element.offsetWidth    //返回元素的水平寬度(包含border,padding和內(nèi)容;同elm.getBoundingClientRect().width)
Element.scrollWidth  //返回滾動元素節(jié)點的總寬度
Element.clientWidth   //返回元素節(jié)點可見部分的寬度(只包含padding和內(nèi)容高度)
3. 如何獲取一個元素的 css 類
Element.classList  //返回當前元素節(jié)點的所有class集合
element.getAttribute("class")
Element.className  //獲取元素節(jié)點的類名
4. 利用原生 dom 怎么獲取某個元素的樣式
document.styleSheets  //返回當前網(wǎng)頁的所有樣式表(數(shù)組;實時的)
Element.style  //返回元素節(jié)點的行內(nèi)樣式,返回CSSStyleDeclaration對象
element.style.cssText //用來讀寫或刪除整個style屬性(內(nèi)聯(lián))
element.style.getPropertyValue(property)  //獲取css內(nèi)聯(lián)屬性
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 是有區(qū)別的
Style屬性值只包含HTML中style屬性定義的CSS。
getComputedStyle()可獲得最終應(yīng)用在元素上的所有CSS屬性對象,包括內(nèi)聯(lián)樣式表單、外部樣式表單及瀏覽器樣式表單級聯(lián)樣式。
getComputedStyle()返回值只讀,而style可修改。
getComputedStyle()返回的顏色值格式永遠都是rgb(#,#,#)
6. 如何在某個位置插入一個元素?
Node.appendChild(node)   //向節(jié)點添加最后一個子節(jié)點,DOM或documentFragment
Node.insertBefore(newNode,oldNode)  // 在指定子節(jié)點之前插入新的子節(jié)點
//解析HTML字符串,然后將生成的節(jié)點插入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區(qū)別
Element.innerHTML   //返回該元素包含的HTML代碼,可讀寫
Element.outerHTML  //返回指定元素節(jié)點的所有HTML代碼,包括它自身和包含的的所有子元素,可讀寫
Node.textContent  //返回當前節(jié)點和它的所有后代節(jié)點的文本內(nèi)容,可讀寫
Node.nodeValue  //返回Text或Comment節(jié)點的文本值,只讀。對于文檔節(jié)點來說, nodeValue返回null. 對于text, comment, 和 CDATA 節(jié)點來說, nodeValue返回該節(jié)點的文本內(nèi)容. 對于 attribute 節(jié)點來說, 返回該屬性的屬性值.
HTMLElement.outerText  //是一個非標準的屬性。作為一個得到器,它返回相同的值作為Node.innerText. 作為一個設(shè)置器,它將刪除當前節(jié)點并將其替換為給定的文本。
textContent與innerText的區(qū)別
Internet Explorer 引入了 node.innerText。意圖類似,但有以下區(qū)別:
textContent 會獲取所有元素的內(nèi)容,包括                               
           
        
       
    
    
     
閱讀需要支付1元查看
  • <strike id="a4k44"><s id="a4k44"></s></strike>
      <strike id="a4k44"><s id="a4k44"></s></strike><strike id="a4k44"><s id="a4k44"></s></strike>
        • <kbd id="a4k44"><pre id="a4k44"></pre></kbd>
          <