DOM的介绍
一 . DOM 介绍
什么是DOM
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的
解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性.
DOM 数(一切都是节点)
上图可知，在HTML当中，一切都是节点：（非常重要）
-
元素节点：HMTL标签。
-
文本节点：标签中的文字（比如标签之间的空格、换行）
-
属性节点：：标签的属性。
整个html文档就是一个文档节点。所有的节点都是Object。
DOM可以做什么
● 找对象(元素节点)
● 设置元素的属性值
● 设置元素的样式
● 动态创建和删除元素
● 事件的触发响应: 事件源 , 事件 , 事件的驱动程序
DOM节点的获取
DOM节点的获取方式其实就是 获取事件源的方式.
操作元素节点,必须首先找到该节点,有三种方式获取DOM节点 :
<div id="box1" class="box"></div>
<script>
//方法一 : 通过 id 获取单个标签
var div1 = document.getElementById("box1");
// 方法二 : 通过 标签名 获取标签数组 ,有 s
var arr1 = document.getElementsByTagName("div");
// 方法三 : 通过 类名 获取标签数组,所以有 s
var arr2 = document.getElementsByClassName("box");
</script>
因为 方法二 / 方法三 获取的是标签数组,那么要先遍历之后再使用.
特殊情况 : 数组中的值只有1个 , 即使如此,这个值也是包在数组里的,所以这个值获取方法 :
<div id="box1" class="box"></div> // 获取数组中的第一个元素 var arr1 = document.getElementsByTagName("div")[0]; //获取数组中的第一个元素 var arr2 = document.getElementsByClassName("box")[0];
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
////支持;
// var ele= div1.getElementsByTagName("p");
// alert(ele.length);
////支持
// var ele2=div1.getElementsByClassName("div2");
// alert(ele2.length);
////不支持
// var ele3=div1.getElementById("div3");
// alert(ele3.length);
////不支持
// var ele4=div1.getElementsByName("yuan");
// alert(ele4.length)
</script>
DOM访问关系的获取
DOM的节点并不是孤独的,因此可以通过DOM节点之间的相对关系对他们进行访问.如下 :
节点的访问关系,是以属性的方式存在的.
JS中的 父子兄 访问关系 :
节点树种的节点彼此拥有层级的关系 :
父(parent),子(child),兄(sibling) 等来描述这些关系.父节点拥有子节点.同级的子节点被称为同胞(兄弟或者姐妹).
获取父节点
调用者就是节点.一个节点只有一个父节点.调用方法 :
<div id="father">
<div id="laoda"></div>
<div id="laoer"></div>
</div>
<script>
var oLaoda = document.getElementById('father');
var.a = oLoda.parentNode // 获取父节点
</script>
节点.parentNode // 调用父节点 nextsibling // 下一个节点(包括标签/空文档/换行节点) nextElementsibling // 下一个元素节点(标签) 综合属性 : 下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling previousSibling // 前一个节点(包括标签/空文档/换行节点) previousElementSibling // 前一个元素节点(标签) 综合节点 : 前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling 节点自己.parentNode.children[index]; //随意得到兄弟节点 firstChild // 第一个子元素节点(标签) firstElementChild //第一个子元素节点(标签) lastChild / lastElementChild //最后一个子元素节点 children / childNodes // 获取所以的子节点 ***** 子节点数组 = 父节点.children; //获取所有节点。用的最多。
注意 : nodeType ==1 表示的是元素节点(标签) . 元素就是标签
★★★★★★ DOM 节点的操作
节点的访问关系都是属性
节点的操作都是属性(方法)
创建节点
格式如下 :
新的标签(元素节点) = document.createElement("标签名");
//例如 :
var tag = document.creatElement("input");
tag.setAttribute("type","text");
示例 : 比如我们要创建一个一个 li 标签,或者是创建一个不存在的 abcd 标签:
<script type="text/javascript">
var a1 = document.createElement("li");
var a2 = document.createElement("abcd");
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
</script>
结果 :
插入节点
插入节点的方式有两种,分别有不同的含义 :
方式一 :
父节点.appendChild(新的子节点); // 父节点的最后插入一个新的子节点
方式二 :
父节点.insertBrfore(新的子节点,作为参考的子节点); // 在参考点钱插入一个新的节点 // 如果参考节点为 null(空),那么他将在父节点最后插入一个子节点
删除节点
父节点.removeChild(子节点); // 用父节点删除子节点,必须要指定删除那个子节点
如果想删除自己这个节点 :
node1.parentNode.ramoveChild(node1);
复制节点(克隆节点)
要复制的节点.cloneNode(); 要复制的节点.cloneNode(true);
括号内带不带参数,效果是不一样的 :
不带参数 / 带参数 false : 值复制节点本身,不复制子节点.
带参数 true : 即复制节点本身,也复制其所有的子节点.
替换节点
父节点.replaceChild(newnode,某个节点)
节点属性操作
1. 获取本节点的值 : innerText innerHTML
2. attribute 操作
elementNode(元素节点).setAttribute(name(属性名),value(新的属性值)) //设置节点属性值 elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML) elementNode.removeAttribute(“属性名”); //删除节点属性
3 . value 获取当前选择的value值
1 . input
2 . select (selectedindex)
3 . textarea
4 . innerHTML 给节点添加 html 代码 :
该方法不是 w3c 的标准, 但是主流浏览器支持
tag.innerHTML = "<p>要显示的内容</p>";
5 . 关于 class 操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
6 . 改变 css 样式 :
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
.style.fontSize=48px
二 . 关于DOM的事件操作
JavaScript的组成
JavaScript 基础分成三部分 :
(1) . ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
(2) . DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
(3) . BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。
事件
JS是以事件驱动为核心的一门语言。
事件三要素
事件的三要素：事件源、事件、事件驱动程序。
比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。
再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。
于是我们可以总结出：谁引发的后续事件，谁就是事件源。
总结如下：
-
事件源：引发后续事件的html标签。
-
事件：js已经定义好了（见下图）。
-
事件驱动程序：对样式和html的操作。也就是DOM。
代码书写步骤如下：（重要）
-
（1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
-
（2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
-
（3）书写事件驱动程序：关于DOM的操作
代码举例：
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、获取事件源
var div = document.getElementById("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
事件类型
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
针对事件的三要素
1. 获取事件源 的方式(DOM节点的获取)
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签 var arr1 = document.getElementsByTagName("div1"); //方式二：通过 标签名 获得 标签数组，所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
2 . 绑定事件的方式 :
方式一 : 直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>
方式二 : 先单独定义函数,在绑定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
注意上方的注释.绑定的时候,写 fn 而不是写 fn() , fn 代表的是整个函数, fn()代表的是返回值
方式 三 : 行内绑定
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。
3 . 事件驱动程序 :
<style> #box { width: 100px; height: 100px; background-color: pink; cursor: pointer; //把鼠标变成小手的模样 } </style> </head> <body> <div id="box" ></div> <script type="text/javascript"> var oDiv = document.getElementById("box"); //点击鼠标时，原本粉色的div变大了，背景变红了 oDiv.onclick = function () { oDiv.style.width = "200px"; //属性值要写引号 oDiv.style.height = "200px"; oDiv.style.backgroundColor = "red"; //属性名是backgroundColor，不是background-Color } </script>
上方代码的注意事项：
- 在js里写属性值时，要用引号
- 在js里写属性名时，是
backgroundColor，不是CSS里面的background-Color。记得所有的像css属性的text-*，line-*、backgroun-*等在js中都写成驼峰
onload 事件
当页面加载（文本和图片）完毕的时候，触发onload事件。
举例：
<script type="text/javascript"> window.onload = function () { console.log("小马哥"); //等页面加载完毕时，打印字符串 } </script>
有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。
示例 : 当鼠标悬停在img上时，更换为另外一张图片；鼠标离开时，还原为本来的图片。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload页面加载完毕以后再执行此代码
window.onload = function () {
//需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseover = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseout = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd1.png";
}
}
</script>
</head>
<body>
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>
DOM操作的相关案例--->>>>■■■■■
