DOM基础内容

DOM

当网页被加载时，浏览器会创建页面的文档对象模型：

• 节点树
  

• 所以可以从上面理解为多叉树数据结构

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应
  --- 一个简单的dom查找节点元素案例:

    Document

    这是d1

   let dom=document.querySelector(".d1");
   console.log("div",dom.tagName);

Node节点

1. Node节点有三种属性:nodeName,nodeValue,nodeType
   | 节点类型 | nodeName | nodeType | nodeValue |
   | --- | --- | --- | --- |
   | 元素节点 | 元素名称 | 1 | null |
   | 属性节点 | 属性名称 | 2 | 属性值 |
   | 文本节点 | #text | 3 | 文本内容 |

document对象也是Node类的对象，它也可以调用这三个属性。它们的值，分别是：document.nodeName -> #documnet；document.nodeType -> 9；document.nodeValue -> null。

层次节点:

因为是树形结构,所以肯定有兄弟节点和父节点和子节点，这也就构成了当前节点的层次节点

以上是层次节点的属性:

属性	说明
childNodes	获取当前元素节点的所有子节点对象集合。如果没有子节点返回的集合长度为0。
firstChild	返回当前元素节点的第一个子节点对象，如果没有子节点返回null。
lastChild	返回当前元素节点的最后一个子节点对象，如果没有子节点返回null。。
parentNode	获取当前节点的父节点。
previousSibling	获取当前节点的前一个兄弟节点对象，如果没有前一个节点返回null。
nextSibling	获取当前节点的后一个兄弟节点对象，如果没有后一个节点返回null。
ownerDocument	获取该节点的文档根节点，相当于document。
attributes	获取当前元素节点的所有属性节点集合。

父子节点之间的遍历

父节点使用childNodes属性可以获取到所有子节点对象集合，集合中只包含元素节点和文本节点且不包含间接子节点

    02获取子节点对象集合

        p1
        p2

    let div = document.querySelector("#div");

    // div.childNodes: 获取子节点集合
    let arr = div.childNodes;

    // 使用传统for循环方便一点，使用for...in循环会遍历出其它属性
    for (let i = 0;i < arr.length;i ++) {
        let v = arr[i];
        console.log("-------------------",i,"--------------------------")
        console.log("nodeName = ",v.nodeName);
        console.log("nodeType = ",v.nodeType);
        console.log("nodeValue = ",v.nodeValue);
    }

    // 获取第一个子节点
    console.log(div.firstChild == arr[0]); // true
    // 获取最后一个子节点
    console.log(div.lastChild == arr[arr.length - 1]); // true
    // 子节点的父节点就是自己
    console.log(div.firstChild.parentNode == div); // tru

该例子中需要注意的是<div>标签中，换行之后再书写的<p>标签，换行符也是字符，所以div的第一个子节点是一个文本节点。

属性节点遍历

    04获取属性节点

        我是div

    let div = document.querySelector("#div-id");
    // 获取所有属性节点集合
    let arr = div.attributes;

    console.log("属性节点个数：",arr.length);
    for (let i = 0;i < arr.length;i ++) {
        console.log("-----------",i,"------------");
        let attr = arr[i];
        console.log("nodeName = ",attr.nodeName);
        console.log("nodeType = ",attr.nodeType);
        console.log("nodeValue = ",attr.nodeValue);
    }

DOM案列：

test

原图片为 smiley.gif,脚本将图片修改为 landscape.jpg
	点击更改照片

	function buttonFuction(){
		document.getElementById("image").src="landscape.jpg";
	}

DOM事件

---

HTML事件:

• 网页加载时
• input字段改变时
• 按钮被点击的时候

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

• 页面加载时触发事件
• 页面关闭时触发事件
• 用户点击按钮执行动作
• 验证用户输入内容的合法性
• 等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

• HTML 事件属性可以直接执行 JavaScript 代码
• HTML 事件属性可以调用 JavaScript 函数
• 你可以为 HTML 元素指定自己的事件处理程序
• 你可以阻止事件的发生。
• 等等 ...

对事件做出反应

    DOM事件

    能够点击的文本

    DOM事件

    能够点击的文本
    通过函数改变文本
    展示

    function changeTxt(id){
        id.innerHTML="改变文本";
    }
    function displayDate(){
        document.querySelector(".p1").innerHTML=Date();

    }

1. onload 和 onunload 事件

---

nload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

2. onchange 事件

---

nchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

3. onmouseover 和 onmouseout 事件

---

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

4. onmousedown、onmouseup 以及 onclick 事件

---

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

DOM EvenListener

语法：

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

事件冒泡或事件捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击<p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：<p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

菜鸟教程(runoob.com)

div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}

实例演示了在添加不同事件监听时，冒泡与捕获的不同。

	点击段落，我是冒泡。

	点击段落，我是捕获。

document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);