JavaScirpt(JS)——DOM文档对象模型

一、HTML DOM介绍

HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)。

　　通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

　　HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

二、DOM树

　　通过画dom树可以展示文档中各个对象间的关系，用于对象的导航。

三、DOM节点——节点类型

　　HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：

　　1、整个文档是一个文档节点

　　2、每个 HTML 标签是一个元素节点

　　3、包含在 HTML 元素中的文本是文本节点

　　4、每一个 HTML 属性是一个属性节点

　　其中，document与element节点是重点。

四、DOM节点——节点关系

　　节点树中的节点彼此拥有层级关系。

　　父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

注意：

在节点树中，顶端节点被称为根（root）
每个节点都有父节点（除了根）
一个节点可拥有任意数量的孩子
同胞是拥有相同父节点的节点

　　下面的图片展示了节点树的一部分，以及节点之间的关系：

五、DOM 节点——节点查找

　　方式一：直接查找节点

//通过id查找，拿到的是一个标签对象
var oDiv = document.getElementById('box');
//通过类名查找，得到的是一个数组里存放的标签
var oDiv = document.getElementsByClassName('.box')[0];
//通过标签名查找，得到的也是一个数组
var oDiv = document.getElementsByTagName('div')[0];
//通过name属性去查找，得到的也是一个数组
var oDiv = document.getElementsByName('yuan');

　　方式二：导航查找节点：通过某一个标签的位置去查找另一个标签

parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

六、DOM节点——节点操作

1、创建节点

　　document.createElement(标签名) ：在js中动态创建一个html标签

// createElement() 创建节点
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');

2、添加节点

　　容器.appendChild(新元素)：把当前创建的新元素添加到容器的末尾

　　容器.insertBefore(新元素, 老元素)：在当前容器中，把新元素添加到老元素之前

// DOM元素用appendChild()追加子节点
oDiv.appendChild(oP);   // 添加子节点
oP.appendChild(oSpan);

// 把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);

3、删除节点

　　容器.removeChild(元素)：获得要删除的元素，通过父元素调用删除。

oSpan.onclick = function () {
    // removeChild 删除创建的对象
    oDiv.parentNode.removeChild(oDiv);
}

4、替换节点

　　容器.replaceChild(新元素, 老元素)：在当前容器中，拿新元素替换老元素。

somenode.replaceChild(newnode, 某个节点);

5、复制节点

　　元素.cloneNode(false/true)：把原有元素克隆一份一模一样的。

　　false：只克隆当前元素本身。

　　true：深度克隆，把当前元素及其后代都进行克隆

<style>
    .box{
        width: 100px;
        height: 100px;
        background: #f50;
        margin-top: 10px;
    }
</style>
<div class="box" id="box1">1</div>
<div class="box" id="box2"><span>1</span>2</div>
<script>
    var box1 = document.getElementById('box1'),
        box2 = document.getElementById('box2');
    document.body.removeChild(box1);    // -> 删除元素,移除盒子
    document.body.appendChild(box2.cloneNode()) // -> 克隆盒子并添加到body末尾,但不克隆子元素及内容
    document.body.appendChild(box2.cloneNode(true)) // -> 克隆元素并添加到body末尾,克隆子元素及内容(即使是深度克隆也只是克隆内容和结构,并不会克隆盒子上发生的事件)
</script>

6、节点属性操作

（1）获取文本节点的值：

innerText：不管你是赋值还是取值，只能识别纯文本
innerHtml：既可以识别纯文本，也可以识别标签

// 设置oH2的内容，p标签会被解析成p元素显示到HTML页面中
oH2.innerHTML = '<p>嘿 sariy</p>';

// 只设置元素内的文本内容，div标签将被当做文本元素
oH2.innerText = '<div>嘿嘿</div>'

// 将创建好的元素节点添加到指定元素所有内容的后面
oDiv.appendChild(oH2);
// 获取元素节点里的所有内容 包括标签和文本
console.log(oDiv.innerHTML);
// 只获取元素内的文本内容，html标签将被忽略
console.log(oDiv.innerText);

（2）属性（Attribute）操作：

　　给当前元素设置/获取/移除属性的(一般操作的都是他的自定义属性)。

//获取标签属性
console.log(oH2.getAttribute('class'));//wusir2

//设置标签属性
oA.setAttribute('href','https://www.luffycity.com');

//删除元素上的属性
oA.removeAttribute('href');

　　getAttribute 可以操作其他的，但是不可以操作class

<body><div class="c1" id="d1">DIV</div>
<script>
    var ele = document.getElementsByClassName('c1')[0];
    ele.id='d2';//修改id
    console.log(ele);

//取属性值 :
//    方式一
    console.log(ele.getAttribute('id'));
//    方式二
    console.log(ele.id);
/ 属性赋值
//    方式一
    ele.setAttribute('id','d3');
    console.log(ele);
//    方式二
    ele.id = 'd3';
    console.log(ele);

（3）value属性可设置或返回单选按钮的value属性的值

// 语法
radioObject.value=sometext

function check(browser) {
    document.getElementById("answer").value=browser
}

（4）关于class的操作

var ele = document.getElementsByClassName('c1')[0];
console.log(ele.className); //打印类的名字
     
ele.classList.add('hide');
console.log(ele); //<div class="c1 hide" id="d1">

ele.classList.remove('hide');//吧添加的remove移除了
console.log(ele)

（5）改变css样式

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
                             .style.fontSize=48px

七、DOM Event对象

　　Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

　　事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄（Event Handlers）

　　HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性	此事件发生在何时...	IE	F	O	W3C
onabort	图像的加载被中断。	4	1	9	Yes
onblur	元素失去焦点。	3
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。			No
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。