DOM（上）

DOM 【document object model】文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
object
js不能直接操作网页节点(html元素)
根据 W3C 的 HTML DOM 标准，
HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
js只能操作js数据类型 【string array object function boolean undefined …】
最容易 最直接 最直观 描述 我们的html元素的只有对象
用一种对象去描述html元素

当这个对象【DOM】发生更新的时候 html 自动更新 [浏览器已经实现]
当html 元素更新的时候 这个对象【DOM】 也会自动更新 [浏览器已经实现]
通过 JavaScript，需要操作 HTML 元素。
html元素的操作 ==>> 普通对象的增删查改 方法调用

得到对象 【获取节点】
html页面 <===> document 
<h1 id="a" class="b">你好</div>
<script type="text/javascript">
//1.通过 id 找到 HTML 元素
	/*var str = document.getElementById("a");
	console.log(str);//<h1 id="a">你好</div>*/
//2.通过标签名找到 HTML 元素
/*var str = document.getElementsByTagName("h1")[0];
console.log(str);*/
//3.通过类名找到 HTML 元素
var str = document.getElementsByClassName("b")[0];
console.log(str);
</script>

单数 document.querySelector();
如果获取不到返回 null
如果只有一个 返回值一个
如果有一群 返回这一群的第一个

var div = document.querySelector('div');
console.log(div);

复数 document.querySelectorAll();
如果获取不到返回 空元素集合
如果只有一个 只有一个元素 元素集合
如果有一群 返回这一群的元素集合

var divs = document.querySelectorAll('div');
console.log(divs);

补充：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

修改 HTML 元素:
1. 改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=新的 HTML

2.改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式

3.改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=新属性值

4.创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。
可以使用两种方法：
一、appendChild() 把新的子节点添加到指定节点。

<div id="d1">
	<p id="p1">my name is Alice</p>
</div>
<script>
	var para=document.createElement("p");
	var node=document.createTextNode("Hello!!");
	para.appendChild(node);

	var element=document.getElementById("d1");
	element.appendChild(para);
</script>

打印结果：
my name is Alice
Hello

二、insertBefore() 在指定的子节点前面插入新的子节点。
eg:

<div id="d1">
	<p id="p1">my name is Alice</p>
</div>

<script>
	var para=document.createElement("p");
	var node=document.createTextNode("Hello!!");
	para.appendChild(node);

	var element=document.getElementById("d1");
	var one=document.getElementById("p1");
	element.insertBefore(para,one);
</script>

打印结果：
Hello!!
my name is Alice