Element 类型

element 类型节点是 DOM 树的主要节点，提供了对元素标签名、子节点及特性的访问

Node 类型特性（nodeType,nodeName,nodeVlaue,parentNode,子节点）

el.nodeType === 1
el.nodeName === 元素的标签名
el.nodeValue === null
el.parentNode 可能是 Element 或者 Document
el 的子节点类型很多

interface Element: Node {
    readonly attribute DOMString tagName;
    DOMString getAttribute( in DOMString name);
    void setAttribute( in DOMString name, in DOMString value)
    raises(DOMException);
    void removeAttribute( in DOMString name)
    raises(DOMException);
    Attr getAttributeNode( in DOMString name);
    Attr setAttributeNode( in Attr newAttr)
    raises(DOMException);
    Attr removeAttributeNode( in Attr oldAttr)
    raises(DOMException);
    NodeList getElementsByTagName( in DOMString name);
    // Introduced in DOM Level 2:
    DOMString getAttributeNS( in DOMString namespaceURI, in DOMString localName)
    raises(DOMException);
    // Introduced in DOM Level 2:
    void setAttributeNS( in DOMString namespaceURI, in DOMString qualifiedName, in DOMString value)
    raises(DOMException);
    // Introduced in DOM Level 2:
    void removeAttributeNS( in DOMString namespaceURI, in DOMString localName)
    raises(DOMException);
    // Introduced in DOM Level 2:
    Attr getAttributeNodeNS( in DOMString namespaceURI, in DOMString localName)
    raises(DOMException);
    // Introduced in DOM Level 2:
    Attr setAttributeNodeNS( in Attr newAttr)
    raises(DOMException);
    // Introduced in DOM Level 2:
    NodeList getElementsByTagNameNS( in DOMString namespaceURI, in DOMString localName)
    raises(DOMException);
    // Introduced in DOM Level 2:
    boolean hasAttribute( in DOMString name);
    // Introduced in DOM Level 2:
    boolean hasAttributeNS( in DOMString namespaceURI, in DOMString localName)
    raises(DOMException);
    // Introduced in DOM Level 3:
    readonly attribute TypeInfo schemaTypeInfo;
    // Introduced in DOM Level 3:
    void setIdAttribute( in DOMString name, in boolean isId)
    raises(DOMException);
    // Introduced in DOM Level 3:
    void setIdAttributeNS( in DOMString namespaceURI, in DOMString localName, in boolean isId)
    raises(DOMException);
    // Introduced in DOM Level 3:
    void setIdAttributeNode( in Attr idAttr, in boolean isId)
    raises(DOMException);
};

1、属性操作

Element 元素是 Element 基类，其继承于 Node 类型。

继承于 Node 的属性

1.1. el.nodeName === el.tagName

返回元素的类型一般为大写

console.log(div1.nodeName); //'DIV'

1.2. el.nodeType

返回元素 Node 类型元素类型为 1

console.log(div1.nodeType); // 1

1.3. el.nodeValue

返回当前节点的值元素类型的为 null

console.log(div1.nodeValue); // null

元素类型的属性

1.4. el.tagName

返回当前元素的标签名跟 el.nodeName 一样

console.log(div1.tagName); // 'DIV'

注：

判断元素的类型不要直接用标签名比较，因为有些时候不一定返回转换后的大写类型名称。

console.log(div1.tagName.toLowerCase() === 'div');

1.5. el.id

返回元素在文档中的唯一标示 id,没有设置 id 为 ''

console.log(div1.id); // 'div1'

1.6. el.title

返回元素的 title 属性

console.log(div1.title); // 'title'

1.7 el.lang、el.dir

返回元素的 lang、dir 属性

2. 元素的 class 属性

el.className
el.classList

2.1 el.className

返回元素的 class 属性，其中 className 所有的浏览器都支持，可读写；

html

<div id="div1" class="className pad10"></div>

console.log(div1.className); // "className pad10"
//当然我们可以修改class
div1.className = 'className pad20';
//元素的属性修改了，但是我们发现其是全部覆盖修改；这时候我们就需要classList了
console.log(div1.className); // "className pad20"

console.log(div1.classList);

2.2 classList

返回元素类属性的实时 DOMTokenList 集合，是一个只读属性

IE10+, Edge , Chrome , Opera11.5 , Safari5.1 , FF3.6

console.log(div1.classList);
var classList = div1.classList;
// 添加一个class类
classList.add('addClass');
console.log(classList); // ['className','pad20','addClass']
// 删除指定的class类型
console.log(classList.remove('addClass')); //undefined
console.log(classList); // ['className','pad20']
// 检查是否包含指定的class类
console.log(classList.contains('pad20')); //true

// 删除或者添加类    IE不支持 所以不要使用
console.log(classList.toggle('addClass')); //true
console.log(classList); // ['className','pad20','addClass']

注：

1、其是一个实时的 DOMTokenList 集合，所以我们修改类属性的时候可以实时调用，如同 attributes childNodes。

2、toggle IE 不支持所以不要使用。

var hasClass = function(el, className) {
	if (!el || !className) return false;
	if (className.indexOf(' ') !== -1) throw new Error("className can't contains space!");

	if (el.classList) {
		return el.classList.contains(className);
	} else {
		// 错误的  这样可能 classes  查找class时也包含
		// return el.className.indexOf(className) !== -1;
		return (' ' + el.className + ' ').indexOf(' ' + className + ' ') !== -1;
	}
};

var addClass = function(el, className) {
	if (!el || !className) return false;
	// 如果添加多个class  使用空格区分
	var classes = className.split(' ');
	// 缓存原来的className
	var curClass = el.className;

	for (var i = classes.length - 1; i >= 0; i--) {
		var adClass = classes[i];
		// 如果 中间连续存在空格  此时adClass就是 '' 所以过滤
		if (!adClass) continue;
		// 如果已存在则不添加
		// if(hasClass(el,adClass)) continue;

		if (el.classList) {
			// DOMTokenList 的add方法  如果 class已存在则不会添加
			el.classList.add(className);
		} else if (!hasClass(el, adClass)) {
			curClass += ' ' + adClass;
		}
	}
	// 不支持classList的 通过className设置
	if (!el.classList) {
		el.className = curClass;
	}
};
var removeClass = function(el, className) {
	if (!el || !className) return false;
	// 如果添加多个class  使用空格区分
	var classes = className.split(' ');
	// 缓存原来的className
	var curClass = el.className;

	for (var i = classes.length - 1; i >= 0; i--) {
		var adClass = classes[i];
		// 如果 中间连续存在空格  此时adClass就是 '' 所以过滤
		if (!adClass) continue;
		// 如果已存在则不添加
		// if(hasClass(el,adClass)) continue;

		if (el.classList) {
			// DOMTokenList 的remove方法
			el.classList.remove(className);
		} else if (hasClass(el, adClass)) {
			// replace 替换掉 class
			curClass.replace(' ' + adClass + ' ', ' ');
		}
	}
	// 不支持classList的 通过className设置
	if (!el.classList) {
		el.className = curClass;
	}
};

3. style

style
getComputedStyle()
currentStyle

3.1 style

style 获得的是一个 CSSStyleDeclaration 对象返回的是 HTML 上 style 指定的所有样式，不包含外部样式、嵌入样式表现出的样式，对于使用短划线的 css 属性，必须转换成驼峰大小写形式特别注意 float (关键字) IE 为 styleFloat 其他为 cssFloat。

var style1 = document.getElementById('style1');
console.log(style1.style); // CSSStyleDeclaration对象

我们获取元素样式

console.log(style1.style.color); // red
console.log(style1.style.backgroundColor); // #ececec
console.log(style1.style.cssFloat || style1.style.styleFloat); // undefined

style1.style.backgroundColor = 'green'; // 设置元素的样式
style1.style.fontSize = '20px'; //变成20px;

CSSStyleDeclaration 对象

我们看 CSSStyleDeclaration 对象

表示一个 CSS 属性键值对的集合, el.style 返回,window.getComputedStyle() 返回的也是此对象其有几个比较重要的属性或者方法 1.cssText、getPropertyValue()、removeProperty()

<font color=green>IE8- 只支持 cssText 其他方法都不支持其他浏览器支持</font>

cssText 是其文本内容也就是 style 的值，可读写；

var style1CssProperties = style1.style;
//其中最重要的是 cssText   读写
console.log(style1CssProperties.cssText); // 'color: red; font-size: 20px;'
//可写，所以我们设置元素的属性的时候不要  el.style.xx = '';...频繁的操作元素
//可以   el.style.cssText = '';  记得在前面加一个 ;
//  注意：  在写的模式下会重写整个style特性的值
style1CssProperties.cssText = style1CssProperties.cssText + ';font-weight : 700 !important;';
console.log(style1CssProperties.cssText); // 'font-weight: 700;''

// style1CssProperties.length    返回当前在HTML上设置的样式属性数量
console.log(style1CssProperties.length); // 3
//包含的 CssRule ????????
console.log(style1CssProperties.parentRule); // null
//返回属性值
console.log(style1CssProperties.getPropertyValue('font-size')); // 20px 或者 ''
//返回可选的优先级
console.log(style1CssProperties.getPropertyPriority('font-weight')); // 'important' 或者 ''
//返回被删除的属性。
console.log(style1CssProperties.removeProperty('font-weight')); // 属性值 或者 ''
// 设置属性
console.log(style1CssProperties.setProperty('font-weight', '700', 'important')); // 没有返回值

el.getComputedStyle() currentStyle 属性（计算样式）

一般常用 window.getComputedStyle(元素,一个伪元素字符串':before'/null)，对于 IE8- 没有实现 window.getComputedStyle()方法需要使用 el.currentStyle

相同的：都是获取元素的计算样式
不同点：
1、getComputedStyle IE8-不支持 el.currentStyle 只有 IE 支持 2、 getComputedStyle(元素,':before') 可以获取伪元素的计算属性 currentStyle 不支持获取元素的计算样式的方法

var getProperty = function(el) {
	// 返回的是一个CSSStyleDeclaration对象
	return window.getComputedStyle ? window.getComputedStyle(el, '') : el.currentStyle;
};

注意的是：获取的所有样式都是只读的。修改样式使用 style 属性，

console.log(window.getComputedStyle(document.getElementById('style1'), ''));
var cSSStyleDeclaration = window.getComputedStyle(document.getElementById('style1'));
console.log(cSSStyleDeclaration.display); //可以获取到display的值 'inline-block';
//获取before
//
console.log(window.getComputedStyle(document.getElementById('getComputedStyle'), ':before').backgroundColor); // rgb(255,0,0)
var currentStyleCss = document.getElementById('style1').currentStyle;
console.log(currentStyleCss); //undefined
console.log(currentStyleCss.display); //undefined

`<font class="j-font-red j-font-blod" >两个获取与设置样式的方法 </font>`

// 获取元素的style属性  肯定不能只获取style元素上的属性 需要获取的是 计算属性
// 支持计算属性  getComputedStyle()   currentStyle
var getStyle = function(el, styleName) {
	if (window.getComputedStyle) {
		if (!el || !styleName) return false;
		// 需要变成驼峰命名的方式
		styleName = camelCase(styleName);
		// float 需要单独处理
		if (styleName === 'float') {
			styleName = 'cssFloat';
		}
		try {
			var computedStyle = document.defaultView.getComputedStyle(el, null);
			return computedStyle ? computedStyle[styleName] : el.style[styleName] || null;
		} catch (e) {
			return el.style[styleName] || null;
		}
	} else {
		if (!el || !styleName) return false;
		// 需要变成驼峰命名的方式
		styleName = camelCase(styleName);
		// float 需要单独处理
		if (styleName === 'float') {
			styleName = 'styleFloat';
		}
		// IE 9 以下不支持getComputedStyle,支持 currentStyle
		try {
			// 当时此时opacity获取不到
			switch (styleName) {
				case 'opacity':
					try {
						return el.filters.item('alpha').opacity / 100;
					} catch (e) {
						return 1.0;
					}
				default:
					var computedStyle = el.currentStyle;
					return computedStyle ? computedStyle[styleName] : el.style[styleName] || null;
			}
		} catch (e) {
			return el.style[styleName] || null;
		}
	}
};
/**
 * 设置元素 的样式
 * @param {[type]} el         [元素]
 * @param {[type]} styleName  [如果是String  则是样式名称，多个样式请用对象的形式 ]
 * @param {[type]} styleValue [样式的值]
 */
var setStyle = function(el, styleName, styleValue) {
	if (!el || !styleName) return false;
	// 如果是对象
	if (typeof styleName === 'object') {
		for (var key in styleName) {
			if (styleName.hasOwnProperty(key)) {
				// 遍历 从而单个设置
				setStyle(el, key, styleName[key]);
			}
		}
	} else {
		// 样式跟class一样 需要驼峰命名
		styleName = camelCase(styleName);
		// 透明度样式 需要单独处理
		if (styleName === 'opacity') {
			el.style.filter = isNaN(styleValue) ? '' : 'alpha(opacity=' + styleValue * 100 + ')';
		} else {
			el.style[styleName] = styleValue;
		}
	}
};

4. 元素子父兄弟节点获取

el.parentNode 父节点
el.childNodes、el.children、el.childElementCount 子节点
el.firstChild、el.firstElementChild 第一个子节点
el.lastChild 、el.lastElementChild 最后一个子节点
el.previousSibling 、 el.previousElementSibling 前一个兄弟节点
el.nextSibling 、 el.nextElementSibling 后一个兄弟节点

4.1 el.parentNode

获取元素的父节点，其跟 el.offsetParent 有很大的区别

这就看出 DOM 树的结构 document -> html -> body -> 元素 -> 元素

console.log(child2.parentNode); //div#div1
console.log('------'); //div#div1
console.log(document.body.parentNode); // body的父节点 html
console.log(document.documentElement.parentNode); // html的父节点   #document
console.log(document.documentElement.parentNode.parentNode); // #document的父节点  null

4.2. el.childNodes、el.children、el.childElementCount (子节点)

前两个是获取元素的子节点，最后一个 el.childElementCount 获取元素子节点的数量。

区别：

el.childNodes 存在跟 childNode 一样的在标准模式下计算空白文本节点，在 IE8--不计算空白节点
el.children 直接获取第一个元素节点(nodeType === 1), 但是 IE9+才支持

html

<ul id="ul">
	空白文本1 空白文本2
	<li>li1</li>
	<li>li1</li>
	<li>li2</li>
	<li>li3</li>
	<!-- 这是注释 -->
	<div>li4</div>
</ul>

var ul = document.getElementById('ul');
var ulChildNodes = ul.childNodes;
var ulChildren = ul.children;
var ulChildElementCount = ul.childElementCount;

console.dir(ulChildNodes);
//NodeList 对象
// chrome/ff/ie9+   [ #text(" 空白文本1 空白文本2 "),<li>, #text(" "),<li>, #text(" "),<li>,<li>, #text(" "),<!-- 这是注释 -->, #text(" "),<div>,#text(""),<li>]
// ie8        [#text(" 空白文本1 空白文本2 ") ,<li>,<li>,<li>,<li>,<!-- 这是注释 -->,div ]
// ie7-       [#text(" 空白文本1 空白文本2 ") ,<li>,<li>,<li>,<li>,<!-- 这是注释 --> ]
console.log(ulChildNodes.length); // chrome : 12   ff: 12   ie9+ : 12  ie8: 7           ie7- : 5
console.dir(ulChildren);
//HTMLCollection 对象
//chrome/ff/ie9+  [<li>,<li>,<li>,<li>,<div>,<li>]
//ie8  [ <li>,<li>,<li>,<li>,<!-- 这是注释 -->,div ]
//ie7-  [ <li>,<li>,<li>,<li>,<!-- 这是注释 --> ]
console.log(ulChildren.length); // chrome : 5   ff: 5     ie9+ : 5   ie8: 6           ie7- : 4
console.log(ulChildElementCount); // chrome : 5   ff: 5     ie9+ : 5   ie8: undefined   ie7- : undefined

ul.appendChild(document.createElement('li'));

console.log(ulChildNodes);
console.log(ulChildNodes.length); // chrome : 13   ff: 13   ie9+ : 13  ie8: 8           ie7- : 6
console.log(ulChildren);
console.log(ulChildren.length); // chrome : 6   ff: 6   ie9+ : 6     ie8: 7           ie7- : 5
console.log(ulChildElementCount); // chrome : 5   ff: 5   ie9+ : 5     ie8: undefined   ie7- : undefined

在 IE9+|其他浏览器上 childNodes 会包含子元素间的空白节点（连续文本节点合成一个文本节点，中间以空格隔开）、注释节点、非法嵌套节点 children 只包含元素节点和非法嵌套节点
在 IE8 上 childNodes 包含子元素的文本节点（连续文本节点合成一个文本节点，中间以空格隔开）、注释节点、非法嵌套节点 children 包含注释节点、非法嵌套节点
在 IE7-下 childNodes 包含子元素的文本节点（连续文本节点合成一个文本节点，中间以空格隔开）、注释节点 children 包含注释节点

4.3. el.firstChild、el.firstElementChild

都是获取元素第一个子节点，但是有很大的区别

区别：

el.firstChild 存在跟 childNode 一样的在标准模式下计算空白文本节点，在 IE8 不计算空白节点 IE7-不计算非法嵌套节点
el.firstElementChild 直接获取第一个元素节点(nodeType === 1), 但是 IE9+才支持

console.log(div1.firstChild); //#text 获取的不是我们相信的第一个div#child1 而是一个空白的text节点  因为在
console.log(div1.firstElementChild); // div#child1

// 这里出现一个问题，我们如何获取元素的第一个元素节点
var getFirstChildEle = function(el) {
	return (
		el.firstElementChild ||
		(function() {
			var first = el.firstChild;
			while (first && first.nodeType === 3) {
				first = first.nextSibling;
			}
			return first;
		})()
	);
};

4.4. el.lastChild、el.lastElementChild

都是获取元素最后一个子节点，但是有很大的区别

区别：

el.lastChild 存在跟 childNode 一样的在标准模式下计算空白文本节点，在 IE8 不计算空白节点 IE7-不计算非法嵌套节点
el.lastElementChild 直接获取素最后一个元素节点(nodeType === 1), 但是 IE9+才支持

console.log(div1.lastChild); //#text 获取的不是我们相信的最后一个div#child1 而是一个空白的text节点  因为在
console.log(div1.lastElementChild); // div#child1

// 这里出现一个问题，我们如何获取元素的最后一个元素节点
var getLastChildEle = function(el) {
	return (
		el.lastElementChild ||
		(function() {
			var last = el.lastChild;
			while (last && last.nodeType === 3) {
				last = last.previousSibling;
			}
			return last;
		})()
	);
};

4.5. el.nextSibling、el.nextElementSibling

都是获取元素下一个兄弟节点，但是有很大的区别

区别：跟 childNodes 与 children 一样一个是节点一个是元素

console.log(child1.nextSibling); //#text
console.log(child1.nextElementSibling); //div#child2

4.6. el.previousSibling、el.previousElementSibling

都是获取元素上一个兄弟节点，但是有很大的区别

区别：跟 childNodes 与 children 一样一个是节点一个是元素

console.log(child2.previousSibling);   //#text
console.log(child2.previousElementSibling);     //div#child1

5. 元素节点查找

querySelector()
querySelectorAll()
matchesSelector()

5.1. el.querySelector()

返回与指定的选择器组匹配的元素的后代的第一个元素。

var queryEl = el.querySelector(selectors);

el : 查找的根元素，如果全局查找可以用 document
selectors : CSS 选择器字符串
queryEl : 子元素中满足指定选择器组的第一个元素没有返回 null

console.log(document.querySelector('#child1')); //div#child1
console.log(document.querySelector('div')); //div#div1  匹配的第一个
console.log(document.querySelector('#div')); //null 不存在
console.log(document.getElementById('div1').querySelector('.children2')); //null  div1子元素不包含此元素

5.2. el.querySelectorAll()

返回与指定的选择器组匹配的元素的后代的所有元素。

var queryEl = el.querySelectorAll(selectors);

el : 查找的根元素，如果全局查找可以用 document
selectors : CSS 选择器字符串
queryEl : 子元素中满足指定选择器组的所有元素 NodeList 如果包含伪元素则返回 Element

console.log(document.querySelectorAll('#child1')); //[div#child1]
console.log(document.querySelectorAll('div')); //[div....]
console.log(document.querySelectorAll('#div')); //[]
console.log(document.getElementById('div1').querySelectorAll('.children2')); //[]

5.3. el.matchesSelector()

返回元素是否与指定的 css 选择器匹配

var boolean = el.matchesSelector(selectors);

el : 匹配的元素
selectors : CSS 选择器字符串
boolean : 是否匹配

注：

1、其只支持 IE9+ 且各浏览器实现方法都不相同

var matchesSelector = function(el, selector) {
	if (el.matchesSelector) {
		return el.matchesSelector(selector);
	} else if (el.msMatchesSelector) {
		return el.msMatchesSelector(selector);
	} else if (el.mozMatchesSelector) {
		return el.mozMatchesSelector(selector);
	} else if (el.webkitMatchesSelector) {
		return el.webkitMatchesSelector(selector);
	} else {
		throw new Error('matchesSelector is support!');
	}
};

console.log(matchesSelector(document.getElementById('div1'), '#div1')); //true

6. 元素节点的插入标记

innerHTML
outerHTML
insertAdjacentHTML
innerText
outerText
textContent

6.1. el.innerHTML

读写返回节点所有的子节点（包含文本节点、注释节点、元素）对应的 HTML 标记写：会根据值创建 DOM 树，然后完全替换掉元素所有的子节点。

注：

1、写的时候记住清除原来子节点绑定的事件。

2、可以通过 innerHTML 插入样式数据 `<style> </style>`

console.log(innerHTML.innerHTML); //<DIV id=innerText>这是text</DIV>asdasd
console.log((innerHTML.innerHTML = '<div>这边</div>')); // <div>这边</div>
console.log((innerHTML.innerHTML = '<div class="inner">这边</div><style>.inner{color:red;}</style>')); // <div>这边</div>
console.log(innerHTML.innerHTML); //<div class="inner">这边</div><style>.inner{color:red;}</style>  字体颜色变红了
innerHTML.innerHTML = '<script> alert(1);</script>'; //在 chrome、firefox、opera、IE无效
//IE8-支持   但是script 需要添加 defer 属性  且需要在前面添加一个有作用域的节点(文本,元素)
innerHTML.innerHTML = '<!-- 注册 --><script defer> alert(1);</script>'; //在 IE8- 无效
innerHTML.innerHTML = '<text/><script defer> alert(1);</script>'; //在 IE8- 无效
innerHTML.innerHTML = '_<script defer> alert(1);</script>'; //在 IE8- 有效 弹出 1

6.2. el.outerHTML

读写返回元素本身及其子节点（注释节点、文本节点、元素）所对应的 HTML 标记

console.log(innerHTML.outerHTML); //<div id="innerHTML"><div>这边</div></div>
console.log((innerHTML.outerHTML = '<div>这边</div>')); // <div id="innerHTML"><div>这边</div></div>  --->  <div>这边</div>

6.3. el.insertAdjacentHTML()

将指定的文本解析为 HTML 或 XML，并将结果节点插入到 DOM 树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接 innerHTML 操作更快

var insertHTML = el.insertAdjacentHTML('beforebegin' | 'afterbegin' | 'beforeend' | 'afterend', insertHTML);

入参： 'beforebegin'|'afterbegin'|'beforeend'|'afterend' 相对于 el 元素的位置 beforebegin : 元素自身的前面; el.parentNode.insertBefore(el,insertHTML) afterbegin : 元素内部第一个子节点之前 == el.insertBefore(el.firstChild,insertHTML) beforeend : 元素内部最后一个子节点之后 == el.insertBefore(null,insertHTML) == el.appendChild(insertHTML) afterend : 元素自身之后 == el.parentNode.insertBefore(el.nextSiblingElement || null,insertHTML); insertHTML 插入的指定的文本出参：插入的元素解析的 HTML/XML

浏览器支持： IE4+ chrome1.0 Opera7.0 safari4.0 firefox8.0

var innerHTML = document.getElementById('innerHTML');
var insertText = '<div>这是插入的文本</div>';

innerHTML.insertAdjacentHTML('beforebegin', '<div>insert同级之前</div>'); // <div>这是插入的文本</div><div id="innerHTML"></div>
innerHTML.insertAdjacentHTML('afterend', '<div>insert同级之后</div>'); // <div id="innerHTML"></div><div>这是插入的文本</div>

innerHTML.insertAdjacentHTML('afterbegin', '<div>insert子节点第一个之前</div>'); // <div id="innerHTML"></div><div>这是插入的文本</div>
innerHTML.insertAdjacentHTML('beforeend', '<div>insert子节点最后一个之后</div>'); // <div id="innerHTML"></div><div>这是插入的文本</div>

6.4. el.innerText

读写是一个表示一个节点及其后代的“渲染”文本内容的属性读：会按照由浅入深的顺序将所有子节点的文本拼接起来写：会删除所有的子节点，插入相应的文本

浏览器支持： IE4+ chrome1.0 Opera7.0 safari4.0 firefox8.0

var innerHTML = document.getElementById('innerHTML');

console.log(innerHTML.innerText); //这是text asdasd
innerHTML.innerText = '这是text文档'; //  <div id="innerHTML">这是text文档</div>
console.log(innerHTML.outerHTML); //  <div id="innerHTML">这是text文档</div>

6.5. el.textContent

读写返回一个节点及其后代的文本内容

浏览器支持： IE9+ chrome1.0 Opera safari firefox

console.log(innerHTML.textContent); //这是text asdasd
innerHTML.textContent = '这是text文档'; //  <div id="innerHTML">这是text文档</div>
console.log(innerHTML.textContent); //  <div id="innerHTML">这是text文档</div>

重点： innerText 与 textContent 的区别

textContent 会获取所有元素的内容，包括<script><style> 但是 innerText 不会；
innerText 受 css 的影响隐藏 display:none；等隐藏元素的内容，但是 textContent 不会；
由于 innerText 受 css 的影响，所以写的时候会触发浏览器的重排
innerHTML 在 IE11-的浏览器下对元素的写，不仅会删除元素的所有子节点，并且会永久破坏所有的文本节点，导致不能再次使用

// 1、textContent会获取所有元素的内容，包括<script><style>  但是innerText不会；
innerHTML.innerHTML = '<div class="inner">这边</div><style>.inner{color:red;}</style>';
console.log(innerHTML.innerText); //这边
console.log(innerHTML.textContent); //这边.inner{color:red;}

// 2、innerText 受css的影响 隐藏display:none；等隐藏元素的内容，但是textContent不会；
innerHTML.innerHTML = '<div class="inner">这边</div><div class="hidden">隐藏的文本</div><style>.inner{color:red;} .hidden{display:none;}</style>';
console.log(innerHTML.innerText); //这边
console.log(innerHTML.textContent); //这边隐藏的文本.inner{color:red;} .hidden{display:none;}

innerHTML.innerHTML = '<div class="inner">这边</div><div class="hidden">隐藏的文本</div><style>.inner{color:red;} .hidden{visibility:hidden;}</style>';
console.log(innerHTML.innerText); //这边
console.log(innerHTML.textContent); //这边隐藏的文本.inner{color:red;} .hidden{visibility:hidden;}

4、innerHTML 在IE11-的浏览器下 对元素的写，不仅会删除元素的所有子节点，并且会永久破坏所有的文本节点，导致不能再次使用
var el = document.getElementById("innerText");
innerHTML.innerText = '这边';
//在IE 11- 的时候 我们发现页面不是我们想的 这边 + 这是text  只有 这边
//chrome 等没有问题
innerHTML.appendChild(el);   //<DIV id=innerHTML>这边<DIV id=innerText></DIV></DIV>

6.6 el.outerText()

读写返回一个节点及其后代的文本内容,写的时候会覆盖本身

浏览器支持： IE4+ chrome1.0 Opera safari firefox

console.log(innerHTML.outerText); //这是text asdasd
innerHTML.outerText = '这是text文档'; //  这是text文档
console.log(innerHTML.outerText); //  这是text文档

7. 元素的属性

el.attributes

7.1 el.attributes()

读写返回该元素所有属性节点的一个实时集合，是一个类数组的 NamedNodeMap 集合对象。如果它内部包含的对象发生改变的话，该对象会自动更新到最新的状态。

浏览器支持： IE4+ chrome1.0 Opera safari firefox

var attrs = div1.attributes;

console.log(attrs[0]); // 'id="div1"'
console.log(attrs['id']); // 'id="div1"'
console.log(attrs.length); // 2

console.log(attrs.getNamedItem('id')); // 'id="div1"'

如何设置一个对象的属性

// 属性节点 创建属性对象
var newAttr = document.createAttribute('title');
newAttr.nodeValue = '这是title';
console.log(attrs.setNamedItem(newAttr)); // 'id="div1"'

// 一些常用的属性可以直接设置
el.id = 'div1';

NamedNodeMap 对象常用方法

el.hasAttribute('id'); //true-false
el.getAttribute('id');
el.setAttribute('id', 'div1');
el.removeAttribute('id');

8. 元素的大小、位置

请看 Element 元素的视窗大小、位置文档

Element 类型 ​

Node 类型特性（nodeType,nodeName,nodeVlaue,parentNode,子节点） ​

1、属性操作 ​

继承于 Node 的属性 ​

1.1. el.nodeName === el.tagName ​

1.2. el.nodeType ​

1.3. el.nodeValue ​

元素类型的属性 ​

1.4. el.tagName ​

注： ​

1.5. el.id ​

1.6. el.title ​

1.7 el.lang、el.dir ​

2. 元素的 class 属性 ​

2.1 el.className ​

2.2 classList ​

注： ​

1、其是一个实时的 DOMTokenList 集合，所以我们修改类属性的时候可以实时调用，如同 attributes childNodes。 ​

2、toggle IE 不支持所以 不要使用。 ​

3. style ​

3.1 style ​

CSSStyleDeclaration 对象 ​

cssText 是其文本内容 也就是 style 的值，可读写； ​

el.getComputedStyle() currentStyle 属性 （计算样式） ​

注意的是： 获取的所有样式都是只读的。修改样式使用 style 属性， ​

<font class="j-font-red j-font-blod" >两个获取与设置样式的方法 </font> ​

4. 元素子父兄弟节点获取 ​

4.1 el.parentNode ​

4.2. el.childNodes、el.children、el.childElementCount (子节点) ​

区别： ​

4.3. el.firstChild、el.firstElementChild ​

区别： ​

4.4. el.lastChild、el.lastElementChild ​

区别： ​

4.5. el.nextSibling、el.nextElementSibling ​

区别：跟 childNodes 与 children 一样 一个是节点一个是元素 ​

4.6. el.previousSibling、el.previousElementSibling ​

区别：跟 childNodes 与 children 一样 一个是节点一个是元素 ​

5. 元素节点查找 ​

5.1. el.querySelector() ​

5.2. el.querySelectorAll() ​

5.3. el.matchesSelector() ​

注： ​

1、 其只支持 IE9+ 且各浏览器实现方法都不相同 ​

6. 元素节点的插入标记 ​

6.1. el.innerHTML ​

注： ​

1、写的时候记住清除原来子节点绑定的事件。 ​

2、 可以通过 innerHTML 插入样式数据 <style> </style> ​

6.2. el.outerHTML ​

6.3. el.insertAdjacentHTML() ​

浏览器支持 ： IE4+ chrome1.0 Opera7.0 safari4.0 firefox8.0 ​

6.4. el.innerText ​

浏览器支持 ： IE4+ chrome1.0 Opera7.0 safari4.0 firefox8.0 ​

6.5. el.textContent ​

重点 ： innerText 与 textContent 的区别 ​

6.6 el.outerText() ​

浏览器支持 ： IE4+ chrome1.0 Opera safari firefox ​

7. 元素的属性 ​

7.1 el.attributes() ​

浏览器支持 ： IE4+ chrome1.0 Opera safari firefox ​

如何设置一个对象的属性 ​

NamedNodeMap 对象常用方法 ​

8. 元素的大小、位置 ​

Element 类型

Node 类型特性（nodeType,nodeName,nodeVlaue,parentNode,子节点）

1、属性操作

继承于 Node 的属性

1.1. el.nodeName === el.tagName

1.2. el.nodeType

1.3. el.nodeValue

元素类型的属性

1.4. el.tagName

注：

1.5. el.id

1.6. el.title

1.7 el.lang、el.dir

2. 元素的 class 属性

2.1 el.className

2.2 classList

注：

1、其是一个实时的 DOMTokenList 集合，所以我们修改类属性的时候可以实时调用，如同 attributes childNodes。

2、toggle IE 不支持所以不要使用。

3. style

3.1 style

CSSStyleDeclaration 对象

cssText 是其文本内容也就是 style 的值，可读写；

el.getComputedStyle() currentStyle 属性（计算样式）

注意的是：获取的所有样式都是只读的。修改样式使用 style 属性，

`<font class="j-font-red j-font-blod" >两个获取与设置样式的方法 </font>`

4. 元素子父兄弟节点获取

4.1 el.parentNode

4.2. el.childNodes、el.children、el.childElementCount (子节点)

区别：

4.3. el.firstChild、el.firstElementChild

区别：

4.4. el.lastChild、el.lastElementChild

区别：

4.5. el.nextSibling、el.nextElementSibling

区别：跟 childNodes 与 children 一样一个是节点一个是元素

4.6. el.previousSibling、el.previousElementSibling

区别：跟 childNodes 与 children 一样一个是节点一个是元素

5. 元素节点查找

5.1. el.querySelector()

5.2. el.querySelectorAll()

5.3. el.matchesSelector()

注：

1、其只支持 IE9+ 且各浏览器实现方法都不相同

6. 元素节点的插入标记

6.1. el.innerHTML

注：

1、写的时候记住清除原来子节点绑定的事件。

2、可以通过 innerHTML 插入样式数据 `<style> </style>`

6.2. el.outerHTML

6.3. el.insertAdjacentHTML()

浏览器支持： IE4+ chrome1.0 Opera7.0 safari4.0 firefox8.0

6.4. el.innerText

浏览器支持： IE4+ chrome1.0 Opera7.0 safari4.0 firefox8.0

6.5. el.textContent

重点： innerText 与 textContent 的区别

6.6 el.outerText()

浏览器支持： IE4+ chrome1.0 Opera safari firefox

7. 元素的属性

7.1 el.attributes()

浏览器支持： IE4+ chrome1.0 Opera safari firefox

如何设置一个对象的属性

NamedNodeMap 对象常用方法

8. 元素的大小、位置