资讯专栏INFORMATION COLUMN

关于DOM的问题笔记

FullStackDeveloper / 1947人阅读

摘要:实时可以传参返回包括了所有名字符合指定条件的元素实时可以传参用于选择拥有属性的元素比如和等返回匹配指定属性的元素节点。返回位于页面指定位置最上层的子节点。此外,使用可以防止攻击。而自身不在存在于创建它时所在的位置。

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元查看
<