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

时间 2019-11-16

标签 javascirpt dom 文档对象模型栏目 Java 繁體版

原文原文链接

1、HTML DOM介绍

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

　　经过 DOM，能够访问全部的 HTML 元素，连同它们所包含的文本和属性。能够对其中的内容进行修改和删除，同时也能够建立新的元素。javascript

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

2、DOM树

　　经过画dom树能够展现文档中各个对象间的关系，用于对象的导航。html

3、DOM节点——节点类型

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

DOM 是这样规定的：
　　一、整个文档是一个文档节点
　　二、每一个 HTML 标签是一个元素节点
　　三、包含在 HTML 元素中的文本是文本节点
　　四、每个 HTML 属性是一个属性节点node

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

4、DOM节点——节点关系

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

注意：浏览器

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

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

5、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  // 上一个兄弟标签元素

6、DOM节点——节点操做

一、建立节点

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

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

二、添加节点

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

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

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

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

三、删除节点

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

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

四、替换节点

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

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

五、复制节点

　　元素.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>

六、节点属性操做

（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

7、DOM Event对象

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

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

事件句柄（Event Handlers）

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

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