前端基本功：JS必记知识点+案例（四）：DOM
DOM (重点)
我们js 有三部分组成的？
ECMAscript DOM BOM
核心（ECMAScript）欧洲计算机制造商协会
描述了JS的语法和基本对象。 var aa var AA 不一样
文档对象模型（DOM） 学习的重点
处理网页内容的方法和接口
浏览器对象模型（BOM） 了解一下
与浏览器交互的方法和接口
window.alert() 很大的兼容问题
-
DOM 定义
DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。
目的其实就是为了能让js操作html元素而制定的一个规范。
DOM 树
DOM树
-
节点
标签 标记 元素 节点
由结构图中我们可以看到，整个文档就是一个文档节点。
而每一个HMTL标签都是一个元素节点。
标签中的文字则是文字节点。
标签的属性是属性节点。
一切都是节点…… -
访问节点
我们学过几个访问节点 ：
getElementById() id 访问节点
getElementsByTagName() 标签访问节点
getElementsByClassName() 类名 有兼容性问题
主流浏览器支持 ie 67 8 不认识
怎么办？ 我们自己封装自己的 类 。
-
封装自己class类
原理： （核心）
我们要取出所有的盒子， 利用遍历的方法 ， 通过每一个盒子的className 来判断。 如果相等就留下。
核心部分源码：
<script>
window.onload = function(){
//封装自己class类名
function getClass(classname){
//如果浏览器支持，则直接返回
if(document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
// 不支持的 浏览器
var arr = []; // 用于存放满足的数组
var dom = document.getElementsByTagName("*");
//alert(dom.length);
for(var i=0;i<dom.length;i++)
{
if(dom[i].className == classname)
{
arr.push(dom[i]);
}
}
return arr;
}
console.log(getClass("demo").length);
}
</script>
完整的封装案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
}
</style>
<script>
window.onload = function(){
//封装自己的类名
function getclass(classname)
{
//判断支持否
if(document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
var arr = [];//用于返回 数组
var dom = document.getElementsByTagName("*");
for(var i=0;i<dom.length;i++)//遍历所有的 盒子
{
var txtarr = dom[i].className.split(" "); //分割类名 并且转化为数组
// ["demo","test"];
for(var j=0;j<txtarr.length;j++)//遍历 通过类名分割的数组
{
if(txtarr[j] == classname)
{
arr.push(dom[i]);//我们要的是 div
}
}
}
return arr;
}
console.log(getclass("test").length);
var test =getclass("test");
for (var i=0;i<test.length;i++)
{
test[i].style.backgroundColor="purple";
}
}
</script>
</head>
<body>
<div></div>
<div class="demo"></div>
<div class="test"></div>
<div></div>
<div></div>
<div class="demo test one"></div>
<div class="demo one"></div>
<div></div>
<div class="demo"></div>
<div class="one two test"></div>
</body>
<html>
结束，分割版本
判断真假
判断真假
访问关系
各个节点的相互关系
各个节点的相互关系
-
父节点
父 ： parentNode 亲的 一层
<script>
window.onload = function(){
var x = document.getElementById("x");
x.onclick = function(){
this.parentNode.style.display = "none";
// 关掉的是他的 父亲
}
}
</script>
-
兄弟节点
nextSibling 下一个兄弟 亲的 ie 678 认识
nextElementSibling 其他浏览器认识的
previousSibling 同理 上一个兄弟
previousElementSibling
我们想要兼容 我们可以合写 || 或者
var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";
完整兄弟节点源码练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var one = document.getElementById("one");
//one.nextSibling.style.backgroundColor = "red";
var div= one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";
}
</script>
</head>
<body>
<ul>
<li>123123</li>
<li>123123</li>
<li id="one">123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
</ul>
</body>
<html>
必须先写 正常浏览器 后写 ie678
-
子节点
firstChild 第一个孩子 ie678
firstElementChild 第一个孩子 正常浏览器
var one.firstElementChild || one.firstChild;
lastChild
lastElementChild
-
孩子节点
childNodes 选出全部的孩子
childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点 （嫡出）
火狐 谷歌等高本版会把换行也看做是子节点
利用 nodeType == 1 时才是元素节点 来获取元素节点
标签 元素
对应源码练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul">
<li>123<>
<li>123<>
<li>123<>
</ul>
<script>
var ul = document.getElementById("ul");
var childrens = ul.childNodes; //选择全部的孩子 亲的
//alert(childrens.length);
for(var i=0; i<childrens.length;i++)
{
if(childrens[i].nodeType == 1)//说明只要元素节点
{
childrens[i].style.backgroundColor ="pink";
}
}
</script>
</body>
<html>
★children 重要 选取所有的孩子 （只有元素节点）
这个更好 跟喜欢它 。 （庶出）
对应源码练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul">
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<script>
var ul = document.getElementById("ul");
var childrens = ul.childNodes; //选择全部的孩子 亲的
//alert(childrens.length);
for(var i=0; i<childrens.length;i++)
{
if(childrens[i].nodeType == 1)//说明只要元素节点
{
childrens[i].style.backgroundColor ="pink";
}
}
</script>
</body>
</html>
ie 678 包含 注释节点 这个要避免开。
dom 的节点操作
新建节点 插入节点 删除节点 克隆节点 等等
-
创建节点
var div = document.creatElement(“li”);
上面的意思就是 生成一个新的 li 标签
-
插入节点
- appendChild(); 添加孩子 append 添加的意思
意思： 添加孩子 放到盒子的 最后面。 - insertBefore(插入的节点，参照节点) 子节点 添加孩子
写满两个参数
- appendChild(); 添加孩子 append 添加的意思
demo.insertBefore(test,childrens[0]);
放到了第一个孩子的前面
如果第二个参数 为 null 则 默认这新生成的盒子放到最后面。
demo.insertBefore(test,null);
-
移除节点
removeChild() 孩子节点
var da = document.getElementById("xiongda");
demo.removeChild(da);
-
克隆节点
cloneNode();
节点操作的源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="demo">
<div id="xiongda"></div>
</div>
<script>
var demo = document.getElementById("demo");
var childrens = demo.children;
//创建节点
var firstDiv = document.createElement("div");
//添加节点
demo.appendChild(firstDiv);
var test = document.createElement("div");
demo.insertBefore(test,childrens[0]);
//移除节点
var da = document.getElementById("xiongda");
demo.removeChild(da);
//克隆节点
var last = childrens[0].cloneNode();
demo.appendChild(last);
demo.parentNode.appendChild(demo.cloneNode(true));
//爸爸添加孩子就是 兄弟
</script>
</body>
</html>
复制节点
括号里面可以跟参数 ， 如果 里面是 true 深层复制， 除了复制本盒子，还复制子节点
如果为 false 浅层复制 只复制 本节点 不复制 子节点。
