文档对象模型
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 {
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事件
-
有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。
-
onload事件(屏幕可视区域)
-
-
-
-
-
