DOM:文档对象模型
1.DOM
-
DOM:文档对象模型,DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构,目的其实是为了能让js操作heml元素而制定的一个规范
-
DOM就是由节点组成: heml加载完毕,渲染引擎会在内存中把HTML文档生成一个DOM树
-
由上图可知,在HTML中一切都是节点非常重要
-
元素节点: HTML标签
-
文本节点: 标签中的文字(比如标签之间的空格,换行)
-
属性节点: 标签的属性
-
整个html文档就是一个文档节点所有节点都是Object
-
-
利用DOM可以完成
-
找对象(元素节点)
-
设置元素的属性值
-
设置元素的样式
-
动态创建和删除元素
-
事件的触发响应: 事件源,事件,事件的驱动程序
-
2.节点查找
-
DOM节点的获取方式其实就是获取事件源的方式
-
直接查找:
-
var div1 = document.getElementById("box1"); //方式一:通过id获取单个标签
var arr1 = document.getElementsByTagName("div1"); //方式二:通过 标签名 获得 标签数组,所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三:通过 类名 获得 标签数组,所以有s
//其中方式二、方式三获取的是标签数组,那么习惯性是先遍历之后再使用。 -
特殊情况
-
即便如此,这一个值也是包在数组里的。这个值的获取方式如下:
document.getElementsByTagName("div1")[0]; //取数组中的第一个元素
document.getElementsByClassName("hehe")[0]; //取数组中的第一个元素
-
-
间接查找
-
DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对他们进行访问,节点的访问呢关系是以属性的方式存在的
-
获取父节点
-
节点.parentNode
-
-
获取兄弟节点
-
总结:为了获取下一个元素节点,我们可以这样做:在IE678中用nextSibling,在火狐谷歌IE9+以后用nextElementSibling
-
为了获取前一个元素节点,我们可以这样做:在IE678中用previousSibling,在火狐谷歌IE9+以后用previousElementSibling
-
随意兄弟节点
-
节点自己.parentNode.children[index]; //随意得到兄弟节点
-
-
-
获取子节点
-
单个子节点
-
总结:为了获取第一个子元素节点,我们可以这样做:在IE678中用firstChild,在火狐谷歌IE9+以后用firstElementChild
-
总结:为了获取最后一个子元素节点,我们可以这样做:在IE678中用lastChild,在火狐谷歌IE9+以后用lastElementChild
-
-
所有子节点
-
子节点数组 = 父节点.childNodes; //获取所有节点。
-
子节点数组 = 父节点.children; //获取所有节点。用的最多。
-
nodeType == 1 表示的是元素节点(标签) 。记住:元素就是标签。
nodeType == 2 表示是属性节点 了解
nodeType == 3 是文本节点 了解
-
-
-
3.节点操作
-
节点本身操作
-
创建节点
-
新的标签(元素节点) = document.createElement("标签名");
-
比如,创建一个li标签,或者创建一个不存在的adg标签,可以这样做
-
<script type="text/javascript">
var a1 = document.createElement("li"); //创建一个li标签
var a2 = document.createElement("adbc"); //创建一个不存在的标签
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
</script>
-
-
-
插入节点
父节点.appendChild(新的子节点);//方式1:父节点的最后插入一个新的子节点。
父节点.insertBefore(新的子节点,作为参考的子节点);//方式2:在参考节点前插入一个新的节点。如果参考节点为null,那么他将在父节点最后插入一个子节点。 -
删除节点
父节点.removeChild(子节点);//用父节点删除子节点。必须要指定是删除哪个子节点。
node1.parentNode.removeChild(node1);//删除自己这个节点 -
复制节点(克隆节点)
要复制的节点.cloneNode(); //括号里不带参数和带参数false,效果是一样的。不带参数/带参数false:只复制节点本身,不复制子节点。
要复制的节点.cloneNode(true); //带参数true:既复制节点本身,也复制其所有的子节点。 -
替换节点
父节点.replaceChild(newnode, 某个节点); //找到这个父标签里面的要被替换的子标签,然后用新的标签将该子标签替换掉
-
-
节点的属性操作
-
获取节点属性值
-
元素节点.属性;
元素节点[属性]; -
元素节点.getAttribute("属性名称");
-
-
设置节点属性值
-
myNode.src = "images/2.jpg" //修改src的属性值
myNode.className = "image2-box"; //修改class的name -
元素节点.setAttribute(属性名, 新的属性值);
-
-
删除节点的属性
-
元素节点.removeAttribute(属性名);
-
-
-
节点文本操作
-
获取文本节点的值
-
var divEle = document.getElementById("d1")
divEle.innerText #输入这个指令,一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML #获取的是该标签内的所有内容,包括文本和标签
-
-
设置文本节点的值
-
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>" #能识别成一个p标签
-
-
-
获取值的操作
-
elemenNode.value ; 适用于以下标签 ,用户输入或者选择类型的标签: input,select,textarea
-
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);
-
-
-
class的操作
-
className 获取所有样式类名(字符串)
首先获取标签对象
标签对象.classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true,否则返回false
classList.toggle(cls) 存在就删除,否则添加,toggle的意思是切换,有了就给你删除,如果没有就给你加一个
-
-
指定css的操作
-
obj.style.backgroundColor="red"
-
对于没有中横线的css属性直接用style.属性名即可,如:
-
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
-
-
对于含有中横线的css属性,将中横线后面的第一个字母换成大写即可,如
-
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
-
-
4.事件
-
JS是以事件驱动为核心的一门语言
-
事件三要素
-
事件源,事件,事件驱动程序
-
-
代码书写步骤
-
(1)获取事件源:document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
(2)绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };
(3)书写事件驱动程序:关于DOM的操作
-
-
常见事件如下
-
获取事件源
-
var div1 = document.getElementById("box1"); //方式一:通过id获取单个标签
var arr1 = document.getElementsByTagName("div1"); //方式二:通过 标签名 获得 标签数组,所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三:通过 类名 获得 标签数组,所以有s
-
-
绑定事件的方式
-
直接绑定匿名函数
-
<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>
-
-
事件驱动程序
-
<style>
#box {
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事件
-
有一点我们要知道:js的加载是和html同步加载的。因此,如果使用元素在定义元素之前,容易报错。这个时候,onload事件就能派上用场了,我们可以把使用元素的代码放在onload里,就能保证这段代码是最后执行。
建议是:整个页面上所有元素加载完毕在执行js内容。所以,window.onload可以预防使用标签在定义标签之前。
-
onload事件(屏幕可视区域)
-
-
-
-
-