为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 会获取所有元素的内容,包括