web前端之DOM初识element

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

一. 属性

element不止有父原型node的属性，也有本身的一些属性，下面我一块儿来看element的经常使用属性以及使用方式：

1. 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元素隐藏
复制代码

`

3. 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'
复制代码

`

4. 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>
复制代码

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

5. 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-属性的属性名，只能包含英文字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_）。

6. 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如下是不兼容的

7. element.clientHeight,element.clientWidth返回当前元素的高度和宽度值，高度值和宽度值会包含padding；
8. element.clientLeft，element.clientTop返回当前元素的边框的宽度值，clientLeft返回左边框，clientTop返回顶部边框;
9. element.scrollHeight，element.scrollWidth返回当前元素总高度值，和宽度值，高度和宽度包含由于滚动条隐藏的不可见部分。高度值和宽度值包含元素的padding值，可是不包含border值。
10. element.scrollLeft，element.scrollTop返回当前元素滚动隐藏的宽度值和高度值；scrollLeft是左边滚动隐藏的值，scrollTop是顶部滚动隐藏的值。
11. element.offsetHeight，element.offsetWidth返回当前元素的高度值和宽度值，高度值和宽度值会包含padding和boeder值。
12. element.offsetLeft，element.offsetTop返回当前元素相对于当前文档左偏移距离和顶部偏移距离。注意：若是当前元素是相对于父元素作绝对定位的，返回的则是相对于父元素的偏移距离
13. element.offsetParent返回当前元素相对定位的父元素节点。
14. 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'
复制代码

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

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

二. 方法

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

注意：方法5,6,7会在event事件篇章详细分享，本篇章只作提示，还有属性方法在本篇章上半部分已经作了介绍，因此这里也没有介绍了，另外element方法其实还有很多并未介绍到，没有介绍到的好比有各种事件，这些方法我的以为，介绍起来繁琐而且并无什么特别的知识点，因此就未作介绍了，想详细了解的同窗能够去到w3c官网了解并查看。

小结

element元素是DOM的核心知识点，包含的知识点很是多，须要咱们更多去使用和验证，js也是经过DOM提供的各类属性接口和方法接口来对element元素进行操做。好啦，今天本次分享就到这里，喜欢的朋友帮点个赞，以示鼓励，谢谢。