web前端之DOM初识element-CSDN博客

在上一篇章，和大家分享了DOM的Node节点，本篇章继续分享关于DOM的知识element，element继承自Node，在原型链上，Node是element的父级，element是Node的子级，因此element可以使用绝大部分node的属性和方法，那么element是什么呢，element就是我们常见的HTML标签，node的元素节点，也就是nodeType等于1的。

一. 属性

element不止有父原型node的属性，也有自己的一些属性，下面我一起来看element的常用属性以及使用方式：

element基础属性，element基础属性指的是标签元素本身可以设置的相关属性，包含如下：

element.id可读写属性，设置或者获取element.id值；
element.tagName返回元素的大写标签名；
element.src img标签的src属性，属性值一般是：图片的相对路径；
element.href a标签的href属性，该属性的属性值一般超链接的跳转路径；
element.title可读写属性，该属性可以用作鼠标移入元素的提示框信息；

<div id='div1'>div标签</div>
var div = document.getElementById('div1');
div.id  // 'div1'
div.tagName  // 'DIV'
div.title = 'div标签'   // 设置title提示
复制代码

` 2. element状态属性，element状态属性指当前元素的状态，请看详细属性名称：

element.hidden 可读写属性，该属性用作元素是否可见，返回的是个布尔值，true表示隐藏，false表示不隐藏；注意：使用hidden属性隐藏时，隐藏的元素本身不会占据空间，和css：display:none功能一样
element.contenteditable 可读写属性，该属性用作该元素内容是否可编辑，返回的是个布尔值，true表示可以，false表示不可以；注意：该属性不止是可以控制元素本身的文本节点可以编辑，只要设置了该属性，同样可以编辑子级元素的内容

<div id='div1'>
    div标签
    <span id='span'>span标签</span>
    <b>标签</b>
</div>
var div = document.getElementById('div1');
var span = document.getElementById('span');
div.contenteditable = true; // 元素内容可以编辑
span.hidden = true; // span元素隐藏
复制代码

element.className,element.classList,className可读写属性，用来设置或读取元素的class值，classList返回一个类似数组的对象，返回的对象包含了当前元素的所有class值，而classList这个对象拥有自己的一系列方法，用作对class的操作。

element.classList.add(): 增加一个 class;
element.classList.remove(): 移除一个 class。
element.classList.toggle(): 切换当前元素某个class,当前class存在则移除，不存在则添加
element.classList.contains(): 检查当前元素是否包含某个class值，返回true或者false
element.classList.item(): 取指定索引位置的class值
element.classList.toString(): 将 class 的列表转为字符串

<div class="div1 left">div标签</div>
var div = document.getElementByClassName('div1')[0];

div.classList // ["div1", "left", value: "div1 left"]

div.classList.add('size') //增加'size' class，  <div id="div1" class="div1 left size">div标签</div>

div.classList.remove('size') //删除'size'  <div id="div1" class="div1 left">div标签</div>

div.classList.toggle('size')// 切换'size' <div id="div1" class="div1 left size">div标签</div>

div.classList.contains('size')  // 返回true或者false

div.classList.item(0)   // 'div1'
复制代码

element.attributes返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反映在这个节点对象上。元素节点还提供六个方法用来操作属性：

element.getAttribute()该方法获取当前元素节点的指定属性值，不存在则返回null，该方法接收一个参数：就是需要获取的属性名称;
element.getAttributeNames()返回一个数组，成员是当前元素的所有属性的名字;
element.setAttribute()该方法是设置当前元素节点指定属性的属性值，该方法接收两个参数，参数一：需要设置的属性名称，参数二：设置的属性值；
element.hasAttribute()该方法是检测当前元素是否含有指定属性，返回一个布尔值；该方法接收一个参数：就是需要检测的属性名称;
element.hasAttributes()注意：该方法比上面这个方法多了个字母s,该方法是用来检测当前元素是否拥有属性的，如果没有任何属性则返回false,有则返回true;
element.removeAttribute()该方法用来删除当前元素指定的属性，该方法接收一个参数，就是需要删除的属性名称。

<div id='div1' title='div标签'>div标签</div>

var div = document.getElementById('div1');

div.attributes  //输出类数组对象 {0: id, 1: title, id: id, title: title, length: 2}

div.getAttribute('title')  // 输出：'div标签'

div.getAttributeNames() // ["id", "title"]

div.setAttribute('name', 'html标签')   //  <div id='div1' title='div标签' name="html标签">div标签</div>

div.hasAttribute('name')    // true

div.hasAttributes()     // true

div.removeAttribute('title')    // <div id='div1' name="html标签">div标签</div>
复制代码

` 注意：这几个方法对所有属性都适用，包括自定义属性

element.dataset数据存取属性，dataset它指向一个对象，可以用来操作 HTML 元素标签的data-*属性。data-*是官方提供标准的在元素上进行数据存储的一个标准属性。

<div id='div1' data-msg = "信息">div标签</div>

var div = document.getElementById('div1');

div.dataset.msg     // '信息'；

div.dataset.msg = '数据信息'// <div id='div1' data-msg = "数据信息">div标签</div>
复制代码

上面是用dataset对象对data-*属性进行存取操作，data-*属性也可以使用getAttribute()和setAttribute()操作。注意：data-属性的属性名，只能包含英文字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_）。

element.innerHTML, element.innerText:两个都是可读写属性，element.innerHTML属性返回一个字符串，返回当前元素包含的所有 HTML 代码和文本,element.innerText属性同样是返回一个字符串，不过它返回的是当前元素包括的所有text文本，如果有子元素节点，则一并子元素节点里的文本，不会返回子元素标签代码。

<div id='div1'>div标签<span>span标签</span></div>

var div = document.getElementById('div1');

div.innerHTML   // div标签<span>span标签</span>

div.innerText   // div标签span标签

div.innerHTML = ''  // <div id='div1'></div>
复制代码

` 注意：innerHTML在赋值操作时，如果值包含有合法的html标签字符串，赋值操作完成后，浏览器是可以解析为正常的html标签的，innerText在IE9以下是不兼容的

element.clientHeight,element.clientWidth返回当前元素的高度和宽度值，高度值和宽度值会包含padding；
element.clientLeft，element.clientTop返回当前元素的边框的宽度值，clientLeft返回左边框，clientTop返回顶部边框;
element.scrollHeight，element.scrollWidth返回当前元素总高度值，和宽度值，高度和宽度包含因为滚动条隐藏的不可见部分。高度值和宽度值包含元素的padding值，但是不包含border值。
element.scrollLeft，element.scrollTop返回当前元素滚动隐藏的宽度值和高度值；scrollLeft是左边滚动隐藏的值，scrollTop是顶部滚动隐藏的值。
element.offsetHeight，element.offsetWidth返回当前元素的高度值和宽度值，高度值和宽度值会包含padding和boeder值。
element.offsetLeft，element.offsetTop返回当前元素相对于当前文档左偏移距离和顶部偏移距离。注意：如果当前元素是相对于父元素做绝对定位的，返回的则是相对于父元素的偏移距离
element.offsetParent返回当前元素相对定位的父元素节点。
element.style读取属性，用来获取当前元素指定的css样式：

<style>
    div{
        width:100px;
        height:100px;
    }
</style>
<div id='div1'>div标签</div>

var div = document.getElementById('div1');
div.style.height    // `100px`
div.style.fontSize = '24px'
复制代码

` 注意：该属性设置的样式都是行间样式

element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling：element.children所有子元素，element.firstElementChild获取第一个子元素,element.lastElementChild获取最后一个子元素节，element.nextElementSibling获取后一个兄弟元素，element.previousElementSibling获取上一个兄弟元素。

二. 方法

element.querySelector(),接收一个css选择器作为参数，返回当前元素下该参数匹配到的第一个元素。
element.querySelectorAll(),接收一个css选择器参数，返回一个类数组，类数组里包含了当前元素下所有符合匹配条件的元素。
element.getElementsByClassName()接收一个calss选择器参数,返回一个类数组，类数组里包含了当前元素下所有符合匹配条件的元素。
element.getElementById()接收一个id选择器参数，返回当前元素下符合匹配条件的元素。
element.addEventListener()添加二级DOM事件监听函数。
element.removeEventListener()移除二级DOM事件监听函数。
element.dispatchEvent() 事件触发函数。

注意：方法5,6,7会在event事件篇章详细分享，本篇章只做提示，还有属性方法在本篇章上半部分已经做了介绍，所以这里也没有介绍了，另外element方法其实还有不少并未介绍到，没有介绍到的比如有各类事件，这些方法个人觉得，介绍起来繁琐并且并没有什么特别的知识点，所以就未做介绍了，想详细了解的同学可以去到w3c官网了解并查看。