JS-DOM_js结构和行为耦合-CSDN博客

本文链接：https://blog.csdn.net/ImmortalSYM/article/details/120089209

JS-DOM

DOM简介

DOM—宿主对象，由浏览器或者编程环境提供的对象；

—全称：Document Object Model文档对象模型；

—JS中通过DOM对HTML文档进行操作；可以随心所欲的操作WEB页面；

文档—文档表示的是整个HTML网页文档；（文档也可以看作是一个对象）；

对象—表示将网页中的每一部分都转换为一个对象；（比如<h1>标签，注释，标签内容等等）；

模型—使用模型表示对象间的关系，即DOM树，方便获取对象；
节点（Node）构成HTML文档的最基本单元；

—节点是构成网页的最基本的组成部分，网页中的每一部分都可以称为一个节点；

—比如：<html>标签、属性、文本、注释、整个文档等都是一个节点；

—节点的类型不同，则其属性和方法也不同；

—常用的节点分为四类：
1. 文档节点：整个HTML文档；
2. 元素节点：HTML文档中HTML标签；
3. 属性节点：元素的属性；
4. 文本节点：HTML标签中的文本内容；
—每种类型的节点都具有的属性：

nodeName nodeType nodeValue

文档节点 #document 9 null

元素节点标签名 1 null

属性节点属性名 2 属性值

文本节点 #text 3 文本内容

—浏览器已经为我们提供了支持文档节点对象，这个对象是window属性；可以在页面中直接使用，文档节点document代表整个网页；

—getElementById()：document对象的方法，获取特定id属性值的元素；
```
<script>
	//通过JS访问html中的按钮元素
    var btn = document.getElementById("btn");
    console.log(btn);
    //通过innerHTML属性，修改按钮的内容
    btn.innerHTML = "I'm a Button";
</script>
```
事件简介
—事件为文档或者浏览器窗口中发生的一些特定的交互瞬间；

—JavScript和HTML之间的交互（用户和浏览器之间的交互行为）是通过事件实现的；比如，点击某个元素、将鼠标移入某个元素等；

处理事件

—1. 可以在事件对应的属性中设置一些JS代码，当事件被触发时，这些代码将会执行；这种写法结构和行为耦合，不方便维护，因此不推荐使用；
```
<body>
 
 <button id="btn" onclick="alert('点我干哈')">我是一个按钮</button>
</body>
```
—2. 可以为特定元素的对应事件绑定处理函数的形式来响应事件；可以通过添加属性的方式，当事件被触发时，其对应的函数将会被调用；开发过程中推荐使用；
```
<body>
	<script>
		//获取按钮对象
 	var btn = document.getElementById("btn");
 	//为对应事件绑定处理函数来响应事件，当事件被触发时，其对应函数将会被调用
 	//相当于给对象添加一个点击属性
 	//为单击事件绑定的函数，称为单击响应函数
 	btn.onclick = function(){
     	alert("点我一下");
 	};
	</script>
</body>
```
文档的加载
—浏览器加载页面时，是按照自上往下的顺序加载的，读取一行就运行一行；

—如果将<script>标签内容写到页面上边，在代码执行时，页面还没有加载，DOM对象也没有加载，会导致无法获取DOM对象；

解决方式：

—1. 将JS代码编写到<body>内，可以在页面加载完毕后，在执行js代码；（较为推荐）

—2. onload属性，事件会在整个页面加载完成之后才会触发，支持onload事件的JS对象：image、layer、window；

—可以为window绑定onload事件，该事件对应的响应函数在页面加载完成后响应，确保代码执行时所有的DOM对象加载完毕；
```
<script>
  //为window绑定onload事件，在整个页面加载完成后再响应事件函数
	window.onload = function(){
     var btn = document.getElementById("btn");
     btn.onclick = function(){
         alert("点我干哈？");
     };
 };
</script>
```
DOM查询

获取元素节点

通过document对象调用，获取元素节点：

—getElementById()：通过id属性获取一个元素节点对象（因为id属性是唯一的）；

—getElementsByTagName()：通过标签名获取一组元素节点对象；这个方法会返回类数组对象，所有查询到的内容都会封装到类数组对象中；即使查询到元素只有一个，也会封装到数组中返回；

—getElementsByName()：通过name属性获取一组元素节点对象；（主要获取表单对象）；

—如果需要读取元素节点的属性值，可以直接使用 元素.属性名 实现读取；比如：元素.name 元素.id等（适用于表单元素）; 表单中文本框的value属性值就是文本框中填写的内容；

—但class属性不能采用元素.属性名这种方式，读取class属性值，需要使用 元素.className；

—通过innerHTML属性可以获得元素内部的html代码（文本内容）；

—innerHTML属性对于自结束标签，无意义；

—innerText：属性，可以获取元素内部的文本内容，和innerHTML类似，不同的是它会自动将<html>标签去除；

获取元素节点的子节点

通过具体的元素节点调用

—getElementsByTagName()：方法，返回当前节点的指定标签名后代节点；

—childNodes：属性，表示当前节点的所有子节点；注意：这个属性会获取包括文本节点在内的所有节点；例如：标签间的空白也会当成文本节点；但是在IE8及以下的浏览器不会将空白文本当作子节点；

—children属性可以获取当前元素的所有子元素，注意是元素，因此不包括其他文本节点；所有浏览器都支持；

—firstChild：属性，表示当前节点的第一个子节点；注意这个子节点包括文本节点；

—firstElementChild：属性，表示获取当前元素的第一个元素，不包括文本节点；不支持IE8及以下的浏览器；

—lastChild：属性，表示当前节点的最后一个子节点；

获取父节点和兄弟节点

通过具体节点调用

—parentNode：属性，表示当前节点的父节点；

—previousSibling：属性，表示当前节点的前一个兄弟节点；也会获取空白文本节点；

—previousElementSibling：属性，表示获取前一个兄弟元素；不包括空白文本；

—nextSibling：属性，表示当前节点的后一个兄弟节点；

获取标签下的内容：

—1. 获取标签节点，然后通过标签节点.innerHTMl或者标签节点.innerText；

—2. 较为麻烦：获取元素节点，然后获得元素节点下的文本节点对象，元素节点.firstChild，通过节点中特有的属性nodeValue获取文本内容；即：元素节点.firstChild.nodeValue；
DOM查询的其他方法

—在document中有一个属性body，它保存的是body的引用；

—documentElement属性，保存的是<html>根标签；

—all属性，表示页面中所有元素；

—getElementsByClassName()方法，根据元素的class属性值查询一组元素节点对象，；但是该方法不支持IE8及以下的浏览器；

—document.querySelector()方法
1. 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象；
2. 虽然IE8中没有getElementsByClassName()，但是可以使用querySelector()代替；
3. 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个；
—document.querySelectorAll()方法
1. 该方法和querySelector()用法类似，不同的是将符合条件的元素封装到数组中返回；
2. 即使符合条件的元素只有一个，它也会返回数组；
```
<script>
	window.onload = function(){
        //获取body标签
        var body = document.getElementsByTagName("body")[0];
        var body = document.body;
    	//获取页面中所有元素
    	var all = document.getElementsByTagName("*");
    	var all = document.all;
    	//获取属性为box1下的div
    	var div = document.querySelector(".box1 div");
    };

</script>
```
DOM增删改
添加节点的一般方法
1. createElement()
  
  —可以用于创建一个元素节点对象；
  
  —需要一个标签名作为参数，将会根据该标签名创建元素对象；
  
  —并将创建好的对象作为返回值返回；
2. createTextNode()
  
  —可以用于创建文本节点对象；
  
  —需要文本内容作为参数，将会根据文本内容创建文本节点对象；
  
  —并将创建的文本节点对象作为返回值返回；
3. appendChild()
  
  —可以向一个父节点中添加一个新的子节点；
  
  —语法：父节点.appendChild(子节点)；
4. innerHTML()
  
  —可以通过innerHTML()添加一个子节点内容
  
  —语法：父节点.innerHTML += "<li>北京<li>"
  
  —一般会两种方式结合使用；
5. insertBefore()
  
  —可以在指定的子节点前插入新的子节点；
  
  —语法：父节点.insertBefore(新节点，旧节点);
6. replaceChild()
  
  —可以使用指定的子节点替换已有的子节点；
  
  —语法：父节点.replaceChild(新节点，旧节点);
7. removeChild()
  
  —可以删除一个子节点；
  
  —语法：父节点.removeChild(子节点);
增删改操作一般都需要涉及子节点的父节点，常用如下语法进行增删改：子节点.parentNode.removeChild(子节点);
```
<script>
	window.onload = function(){
        //创建li节点
        var li = document.createElement("li");
        //创建li元素下的文本节点
        var text = document.createTextNode("文本节点");
        //将文本节点添加到元素节点中
        li.appendChild(text);
        //与innerHTML相结合
        li.innerHTML = "文本节点";
        li.parentNode.appendChild(li);
        //直接使用innerHTML向父节点添加
        //这种方法是将全部内容都修改
        li.parentNode.innerHTML += "<li>新增节点</li>";//使用+=，在原来内容基础上新增
    };
</script>
```
超链接a相关响应事件

响应函数在只有在超链接点击时才会执行，而循环遍历在页面加载完成后就会立刻执行；当响应函数执行时，循环遍历早已执行完毕，因此响应函数中最后获取的是循环遍历最终索引+1；

—点击超链接后，超链接会跳转页面，这是超链接的默认行为；

—此时不希望出现跳转默认行为，可以通过在响应函数的最后 return false 来取消默认行为；

—或者在超链接中，将href属性设置为javascript:;
操作内联样式

通过JS修改元素样式

—语法：元素.style.样式名 = 样式值;

—注意样式值需要传递一个字符串；

—如果CSS样式中含有-，比如backgroun-color，这种名称在JS中是不合法的，需要将这种样式名修改为驼峰命名法；去掉 - ，然后将-之后的字母大写；例如：border-top-width 变为 borderTopWidth;

—我们通过style属性设置的样式都是内联样式，内联样式具有较高的优先级，所以通过JS修改的样式往往会立即显示；

—但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS修改样式也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important；

通过JS读取元素样式

—语法：元素.style.样式名;

—读取的样式值为字符串；

—通过style属性读取的元素样式都是元素的内联样式，无法获取样式表中的样式；
获取元素当前样式

如何获取元素当前的样式

—语法：元素.currentStyle.样式名;

—上述语法可以获取当前元素正在显示的样式，注意它不是元素内联样式，也不是样式表的样式，是谁生效就显示谁的样式；

—如果当前元素未设置该样式，则获取其默认值；比如width会获取auto值；

—currentStyle仅IE浏览器支持，其他浏览器不支持；
—在其他浏览器中可以使用getComputedStyle()方法来获取元素当前的样式；

—这个方法是window的方法，可以直接使用；

—该方法需要传递两个参数：
1. 要获取样式的元素；
2. 可以传递一个伪元素，一般都传递null；
—该方法会返回一个对象，对象中封装了元素对应的样式；

—如果要获取元素样式，需要使用返回对象.样式名来读取样式值；样式值为字符串；

—如果当前元素未设置该样式，则会获取真实值，而不是默认值；比如width会获取一个长度；

—该方法不支持IE8及以下的浏览器；

通过currentStyle和getComputedStyle()读取的元素样式都是只读的，不能进行修改，如果进行修改必须通过style属性；
可以自定义一个函数，兼容所有浏览器

—第一个参数obj：要获取样式的元素；

—第二个参数name：要获取的样式名；
```
<script>
	function getStyle(obj,name){
   //判断浏览器中是否存在getComputedStyle()方法
   //注意这里要加上window，如果没有加上window，相当于变量，如果变量在全局找不到，会报错
   //加上window，相当于属性，属性如果找不到，返回undefined; 
     if(window.getComputedStyle){
         //一般浏览器中具有getComputedStyle()方法
         return getComputedStyle(obj,null)[name];
     }else{
         //IE8浏览器下使用currentStyle
         return obj.currentStyle[name];
     }
     //也可以写成简洁方式
     return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
 }
</script>
```
其他样式的相关属性
以下所说的属性都是只读的，并且返回值都是一个数值，可以直接进行计算
1. clientWidth和clientHeight
  
  —这两个属性可以获取元素的可见宽度和高度；
  
  —这个属性都是不带px，返回的是一个数值，可以直接进行计算；
  
  —会获取元素的宽度和高度，包括内容区和内边距，不包括边框；
  
  —这些属性都是只读的，不可修改；
  
  —如果有滚动条，其获取的宽度和高度是不包括滚动条；
2. offsetWidth和offsetHeight
  
  —可以获取元素的整个宽度和高度，包括内容区、内边距和边框；
3. offsetParent
  
  —可以用来获取当前元素的定位父元素；
  
  —它会获取到离当前元素最近的开启定位的祖先元素；
  
  —如果所有的祖先元素都未开启定位，则返回body；
4. offsetLeft
  
  — 当前元素相对于定位元素的水平偏移量；
5. offsetTop
  
  —当前元素相对于定位元素的垂直偏移量；
6. scrollWidth和scrollHeight
  
  —可以获取元素整个滚动区域的宽度和高度；
7. scrollLeft
  
  —可以获取水平滚动条滚动的距离；
8. scrollTop
  
  —可以获取垂直滚动条滚动的距离；
—onscroll事件，该事件会在元素的滚动条滚动时触发；

—当满足scrollHeight - scrollTop = clientHeight等式时，说明垂直滚动条到底；

—当满足scrollWidth - scrollLeft = clientWidth等式时，说明水平滚动条到底；