為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)容,包括