day19---DOM

DOM—Document Object Model
DOM定义了表示和修改文档所需的方法。DOM对象即为宿主形象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。DOM不能改变CSS(通过行间样式间接改变)也有人称DOM是对HTML以及XML的标准编程接口。
通过JS改变HTML代码
我们在HTML文件中定义几个标签

<div id="sex">male</div>
<div class="demo">123</div>
<div name="fruit">234</div>
<p>345</p>

而怎样通过JS调用这些标签呢？
我们先选出标签 通过

var sex = document.getElementById('sex');---Id为唯一标识
var demo = document.getElementsByClassName('demo');---此时是一个数组 数组中包含demo,所以如果我们要拿出想要的元素 则
var demo = document.getElementsByClassName('demo')[0];--其余同理（id除外）
var fruit = document.getElementsByName('fruit')[0];
var p = document.getElementsByTagName('p')[0];

拿出来之后，我们便可以进行修改来操控HTML。
我们还可以插入新的标签进入HTML中。
首先先定义，再插入。

var newDiv = document.createElement('div');------创建
document.body.appendChild(newDiv);------插入

除了增，我们也可以删除标签

newDiv.remove();

遍历节点树
parentNode–>父节点（最顶端的parentNode为#document）
childNodes–>子节点们
firstChild–>第一个子节点
lastChild–>最后一个子节点
nextSibling–>后一个兄弟节点
previousSibling–>前一个兄弟节点
而节点包括：元素节点，属性节点，文本节点，注释节点等

<div>123
	<strong>
		<span></span>
	</strong>
	<span></span>
	<p></p>234
</div>

如上 div标签是strong span p 的父节点 strong是自身嵌套内的span的父节点。
123、234是文本节点 div strong等标签为元素节点。

div.firstChild = "123"
div.lastChild = "234"

遍历元素的节点树
parentElement–>返回当前元素的父元素节点,与parentNode不同的点：最顶端不为#document
children–>只返回当前元素的元素子节点
node.childElementCount === node.children.length --> 当前元素子节点个数
firstElementChild --> 返回的是第一个元素节点
lastElementChild --> 返回的是最后一个元素节点
nextElementSibling–>返回后一个兄弟元素节点
previousElementSibling–>返回前一个兄弟元素节点

节点的四个属性
一.nodeName–>返回元素标签名 字符串 以大写形式表示，只读,不能改

var strong = document.childNodes[1];
			//document.childNodes[1].nodeName  = "STRONG"
div.childNodes[1].nodeName = 'abc';//更改不了

二.nodeValue–>Text(文本)节点或Comment(注释)节点的文本内容，可读写 返回元素值，可更改

var div = document.childNodes[0];
			//document.childNodes[0].nodeValue---"123"
document.childNodes[0].nodeValue = 789;
			//document.childNodes[0].nodeValue---"789"

三.nodeType–>返回该节点的类型，只读，返回数字代表

节点的类型

元素节点---1
属性节点---2
文本节点---3
注释节点---8
document---9
DocumentFragment---11

四.attributes–>该元素的属性节点的集合

判断该元素有没有子节点的方法Node.hasChildNodes() 返回true or false。