成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

FullStackDeveloper / 2052人閱讀

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

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

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