05-element节点

element节点

HTML元素对象继承了Node接口、ParentNode接口和ChildNode接口，以及EventTarget事件接口，对于一下特殊的HTML元素对象还有自己独特的属性和方法

属性

属性名	描述
`Element.attributes`	以`NamedNodeMap`结构存储着所有属性节点对象，`NamedNodeMap`是一个伪数组结构，既可以使用数组下标也可以使用key获得属性对象，属性对象也继承`Node`接口，所以可以使用`nodeValue`属性修改属性值，`nodeName`属性获取属性名
`Element.dataset`	以`data-`为前缀的自定义属性集合，自定义属性命名必须使用中划线分隔多个单词，不能使用驼峰命名法，到js中会被自动转义成驼峰命名法

方法

方法名	描述
`Element.getAttribute(name)`	根据属性名获取属性值，没有返回`null`
`Element.getAttributeNames()`	获取所有属性名的数组
`Element.setAttribute(key,value)`	设置属性名和属性值
`Element.hasAttribute(name)`	根据属性名判断是否有该属性
`Element.hasAttributes()`	判断是否有属性
`Element.removeAttribute(name)`	根据属性名删除属性

属性名	描述
`Element.className`	以字符串形式存储`class`属性的属性值
`Element.classList`	以`DOMTokenList`数据结构存储着每个`class`的属性值
`Element.style`	以`CSSStyleDeclaration`数据结构存储着css内敛样式；`CSSStyleDeclaration`数据结构以对象形式存储着各个css的属性值和属性名，只不过属性名从中划线连接变成了驼峰命名法

该集合是一个伪数组结构，拥有length属性和数组下标，同时还拥有一个value属性以字符串形式存储class属性值

方法名	描述
`DOMTokenList.prototype.add(className)`	添加一个类名，无返回值
`DOMTokenList.prototype.add(className)`	删除一个类名，无返回值
`DOMTokenList.prototype.contains(className)`	判断是否有该类名
`DOMTokenList.prototype.replace(oldClass,newClass)`	将旧的类名替换为新的类名
`DOMTokenList.prototype.toggle(className)`	切换该类名，有就移除，没有就添加

以对象形式存储着所有的css属性，这些属性名采用驼峰命名法存储，若未设置这些属性则就是空字符串，若是获取不存在的css属性才会返回undefined

属性名	描述
`CSSStyleDeclaration.prototype.cssText`	内敛样式文本属性内容
`CSSStyleDeclaration.prototype.length`	设置样式的个数

方法名	描述
`CSSStyleDeclaration.prototype.getPropertyPriority(property)`	获取该css属性的优先级，若是`important`就返回该字符串，否则就是空字符串
`CSSStyleDeclaration.prototype.getPropertyValue(property)`	获取该css属性的属性值
`CSSStyleDeclaration.prototype.removeProperty(property)`	删除该css属性的属性值
`CSSStyleDeclaration.setProperty(property,value[,important])`	设置该css属性为该属性值，可以指定`important`

属性名	描述
`Element.innerHTML`	元素内部的HTML代码
`Element.outerHTML`	整个元素的HTML代码
`Element.innerText`	与`Node.prototype.textContent`效果一样，建议使用`Node`接口中的标准方法

这两个方法其实是继承的NonDocumentTypeChildNode接口方法

属性名	描述
`Element.nextElementSibling`	下一个兄弟元素节点
`Element.previousElementSibling`	上一个兄弟元素节点

这些属性返回的都是整数，小数会被四舍五入掉，除拉设置滚动的位置的属性之外都是只读属性

方法名	描述
`Element.clientHeight`	元素的高度 $内容+padding$ ，仅对块元素有效，行内元素永远是0
`Element.clientWidth`	元素的宽度 $内容+padding$ ，仅对块元素有效，行内元素永远是0
`Element.clientLeft`	左边框宽度
`Element.clientTop`	上边框宽度

属性名	描述
`Element.scrollHeight`	元素总高度 $内容+padding$ ，包括溢出内容部分
`Element.scrollWidth`	元素总高度 $内容+padding$ ，包括溢出内容部分
`Element.scrollLeft`	当前元素内容水平向右滚动的距离，可读写
`Element.scrollTop`	当前元素内容垂直向下滚动的距离，可读写，为整个网页设置要使用HTML根元素
`Element.scrollIntoView()`	这是一个方法，使当前元素滚动到可视区位置

为元素节点的事件属性绑定监听函数，这些属性名都是与HTML的事件属性是一致的，唯一不同的是js中绑定的是事件监听函数，而HTML是绑定执行的js语句，这种方式若绑定多个会被覆盖掉