DOM文档对象模型
一、什么是DOM
- DOM：文档：文档表示的是整个HTML网页文档；对象：对象表示将网页中的每一个部分都转换为一个对象；模型：使用模型来表示对象之间的关系，这样方便我们获取对象。
- DOM文档对象模型是针对HTML和XML文档的一个API(应用程序编程接口)，JS通过DOM来对HTML文档进行操作。
二、节点和事件
- 节点是构成我们网页的最基本的组成部分，网页中的每一部分都可以称为一个节点
- 常用节点分为四类：文档节点、元素节点(HTML文档中的HTML标签)、属性节点、文本节点(HTML标签中的文本内容)。
- 节点属性：nodeName、nodeType、nodeValue(文本节点的nodeValue属性是文本内容)。
- 事件就是文档或浏览器窗口中发生的一些特定的交互事件，JavaScript与HTML之间的交互式通过事件实现的。如：点击某个元素、将鼠标移到某个元素上方等等。
三、DOM查询
- 通过document对象调用方法:getElementById();getElementsByTagName();getElementsByName();
- 通过具体的元素节点调用 getElementsByTagName()方法：返回当前节点的指定标签名后代节点。
- 属性：childNodes(当前节点的所有子节点)、firstChild、lastChild。childNodes属性会获取包括文本节点在内的所有节点。children属性可以获取当前元素的所以子元素。firstElementChild可以获取当前元素第一个子元素。
- 获取父节点和兄弟节点（通过具体的节点调用）：parentNode属性：表示当前节点的父节点；previousSibling属性：表示当前节点的前一个兄弟节点；nextSibling属性：表示当前节点的后一个兄弟节点。
- innerHTNL:获取元素内部的代码;innnerText:获取到元素内部的文本内容。
四、DOM查询的剩余方法
- document.body保存的是body的引用，document.documentElement保存的是HTML标签，document.all代表页面中所有的元素。
- 根据元素的class属性查询一组元素节点对象：document.getElementByClassName(),但该方法不支持IE8及以下的浏览器。
- document.querySelector():返回文档中匹配指定 CSS 选择器的一个元素。该方法需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素的节点对象。使用该方法总会返回唯一的元素，如果满足条件的元素有多个，那么它只会返回第一个。IE8中没有getElementByClassName()方法，但可以使用querySelector()代替。
- document.querySelectorAll():该方法与querySelector()类似，不同的是它会将符合条件的元素封装在一个数组中返回。
var div=document.querySelector(".box1 div");
console.log(div.innerHTML);
五、DOM增删改
- 创建节点：creatElement()创建元素节点、creatAttribute()创建属性节点、creatTextNode()创建文本节点。
<div>
<ul id="ul1">
<li id="bj">北京</li>
<li>上海</li>
<li>长沙</li>
<li>武汉</li>
</ul>
</div>
<script type="text/javascript">
var li=document.createElement("li");
var text=document.createTextNode("广州");
li.appendChild(text);
var ul1=document.getElementById("ul1");
ul1.appendChild(li);
var bj=document.getElementById("bj");
ul1.insertBefore(li,bj);
</script>
- removeChild():删除子节点；replaceChild():替换子节点；insertBefore():在指定子节点前插入新节点。
- 使用innerHTML也可以完成DOM的增删改的相关操作。但一般情况下会两种方式结合使用。
<script type="text/javascript">
var ul1=document.getElementById("ul1");
ul1.innerHTML+="<li>广州</li>";
</script>
<script type="text/javascript">
var li =document.createElement("li");
li.innerHTML="广州";
var ul1=document.getElementById("ul1");
ul1.appendChild(li);
</script>
五、DOM操作内联样式
- 通过JS修改元素的样式：语法：元素.style.样式名=样式值。注意：如果CSS的样式中含有-，这种名称在JS中是不合法的，需要将这种样式名修改为驼峰命名法，去掉-，然后-后的单词首字母大写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
position: relative;
width: 100px;
height: 100px;
margin: 25px auto;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="box1">
<button id="button">按钮</button>
</div>
<script type="text/javascript">
var div1=document.getElementById("box1");
var button=document.getElementById("button");
button.onclick=function(){
box1.style.backgroundColor="blue";
}
</script>
</body>
</html>
- 我们通过style属性设置的样式往往是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示，但是如果在样式中写了!important，此时样式会有更高级别的优先级，即使JS也不能覆盖该样式。
- 获取元素当前显示的样式：语法;元素.currentStyle.样式名。但这个方法只有IE浏览器支持，其他浏览器都不支持。
- 在其他浏览器中可以使用getComputedStyle()这个方法来获取元素的样式，这个方法需要两个参数：要获取样式的元素；伪元素(null),这个方法会返回一个对象，对象里封装了当前元素对应的样式，可以通过对象.样式名获取来读取样式。
alert(getComputedStyle(box1.null).backgroundColor);
alert(box1.currentStyle.backgroundColor);
5.自定义getStyle()方法
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
}
- 其他样式相关属性:
- clientWidth和clientHeight:这两个属性可以获取元素的可见宽度和高度(包括内容区和内边距)，这些属性都是不带px的，返回都是一个数字，可以直接进行计算。
- offserWidth和offsetHeight:获取元素整个的高度和宽度，包括内容区、内边距和边框。
- offsetParent:获取当前元素的定位父元素，会获取到离当前元素最近的开启了定位的祖先元素(position不是static)。
- offsetLeft和offsetTop:获取当前元素相对于其定位父元素的水平偏移量和垂直偏移量。
- scrollWidth和scrollHeight:可以获取元素整个滚动区域的宽度和高度。scrollLeft和scrollTop:可以获取水平或垂直滚动条滚动的距离。当满足scrollHeight-scrollTop == clientHeight说明垂直滚动条滚动到底了，当满足scrollWidth-scrollLeft ==clientWidth时说明水平滚动条滚动到底了。
|