美文网首页
Element节点

Element节点

作者: _无味 | 来源:发表于2018-08-18 14:26 被阅读23次

Element节点对象对应网页的 HTML 元素。
每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对象

元素节点的属性
Element.id

返回当前元素的id名
Element.tagName

返回当前元素的标签名
Element.className
返回当前元素的class名,它的值是一个字符串,每个class之间用空格分割。可读可写。

Element.classList
返回当前元素的所有class名,它的值是一个伪数组。

console.log(div.classList)          //获取全部类名,返回伪数组,这个伪数组有六个方法
list.add("five","six")              //添加类名          
list.remove("div2","five")          //删除类名              
list.toggle("six")                  //有就删除,没有就加上        
console.log(list.contains("five"))  //检查当前元素是否包含某个 class        //true  
console.log(list.item(0))           //通过下标来获取某个类名   
console.log(list.toString())        //把classList伪数组改成字符串

Element.clientWidth Element.clientHeight 可赖嗯特
返回元素本身的宽高,算入padding,不算入margin和border。只对块元素生效。

Element.offsetWidth Element.offsetHeight
返回元素本身的宽高,算入padding和border。

Element.scrollLeft Element.scrollTop
scrollLeft返回元素水平滚动条的滚动像素数。
scrollTop返回元素垂直滚动条的滚动像素数。
这两个属性可读可写。

Element.firstElementChild,Element.lastElementChild
Element.firstElementChild属性返回当前元素的第一个元素子节点,
Element.lastElementChild属性返回当前元素的最后一个元素子节点。
没有则返回null

Element.nextElementSibling,Element.previousElementSibling
返回当前元素节点的第一个,最后一个同级元素节点,如果没有则返回null。

Element.offsetParent
返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。
元素本身display:none或者position:fixed,offsetParent返回null
只要元素本身不是display:none,和position:fixed的情况下往上找定
位值不是static的定位,如果找不到就是body

Element.offsetLeft Element.offsetTop
返回该元素距离offsetParent的水平位移和垂直距离

元素节点的方法
Element.remove()
用于移除节点。

相关文章

  • js常用API

    一、节点 节点属性 节点操作 Document节点 Element节点 对象

  • DOM文档树

    节点操作 获取节点 getElementById element = document.getElementByI...

  • JavaScript常用API合集汇总

    节点 节点属性 节点操作 Document节点 Document节点的属性 Element节点的方法 位置方法 属...

  • Element节点

    Element节点对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个Elemen...

  • Element节点

    Element节点(网页的HTML元素.每个HTML元素在DOM数上都会转换成一个元素节点) 属性 Element...

  • Document对象 + DOM 属性操作

    Document对象方法 文档节点 (document) 元素节点 (Element) 属性节点 (Attribu...

  • 【DOM】Element类型

    Element类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。 Element节点特征 ...

  • JS开发学习日志#2

    2017/05/02 element.children 获得子节点列表element.children.item(...

  • DOM—Text节点和DocumentFragment节点

    Text 节点的概念 文本节点(Text)代表元素节点(Element)和属性节点(Attribute)的文本内容...

  • Element和Node相关方法总结

    Element: 父子元素节点属性: childElementCount:返回子元素节点的个数 children:...

网友评论

      本文标题:Element节点

      本文链接:https://www.haomeiwen.com/subject/wrdfiftx.html