JS学习：DOM_js学到dom有点懵-CSDN博客

本文链接：https://blog.csdn.net/weixin_42750434/article/details/108002684

1、DOM 概念

DOM，全称Document Object Model 文档对象模型。
- 文档：表示的就是整个的HTML网页文档
- 对象：对象表示将网页中的每一个部分都转换为了一个对象。
- 模型：使用模型来表示对象之间的关系，这样方便我们获取对象。
作用：JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

2、节点

Node——构成HTML文档最基本的单元。
常用节点分为四类：
    – 文档节点：整个HTML文档（document）
    – 元素节点：HTML文档中的HTML标签（Element）
    – 属性节点：元素的属性（Attr）
    – 文本节点：HTML标签中的文本内容（Text）

3、事件

写的位置：
① body中最后

<body>
  <button id="btn">点我一下</button>  
  <!--<script type="text/javascript">   
   /*
    * 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
    */
   //获取id为btn的按钮
   var btn = document.getElementById("btn");
   //为按钮绑定一个单击响应函数
   btn.onclick = function(){
    alert("hello");
   };   
  </script>  
 </body>

② head里

<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
     /* 
    * onload事件会在整个页面加载完成之后才触发
    * 为window绑定一个onload事件
    *   该事件对应的响应函数将会在页面加载完成之后执行，
    *   这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
    *  
    */
   window.onload = function(){
    //获取id为btn的按钮
    var btn = document.getElementById("btn");
    //为按钮绑定一个单击响应函数
    btn.onclick = function(){
     alert("hello");
    };
   };
  </script>
 </head>

4、获取元素节点

• 通过document对象调用

getElementById() – 通过id属性获取一个元素节点对象
getElementsByTagName() – 通过标签名获取一组元素节点对象
getElementsByName() – 通过name属性获取一组元素节点对象

5、标题获取元素节点的子节点

• 通过具体的元素节点调用

getElementsByTagName() – 方法，返回当前节点的指定标签名后代节点
childNodes – 属性，表示当前节点的所有子节点
childNodes属性会获取包括文本节点在内的所有节点
根据DOM标签标签间空白也会当成文本节点（IE8及以下，不会将空白文本当成子节点）
children属性可以获取当前元素的所有子元素（推荐*）
firstChild – 属性，表示当前节点的第一个子节点
firstElementChild获取当前元素的第一个子元素（不支持IE8及以下的浏览器）
lastChild – 属性，表示当前节点的最后一个子节点

6、获取父节点和兄弟节点

• 通过具体的节点调用

parentNode – 属性，表示当前节点的父节点
previousSibling – 属性，表示当前节点的前一个兄弟节点
previousElementSibling获取前一个兄弟元素（IE8及以下不支持）
nextSibling – 属性，表示当前节点的后一个兄弟节点

7、获取元素节点的属性

• 获取，元素对象.属性名
element.value
element.id
element.className
• 设置，元素对象.属性名=新的值
element.value = “hello”
• 其他属性
nodeValue – 文本节点可以通过nodeValue属性获取和设置文本节点的内容
innerHTML – 元素节点通过该属性获取和设置标签内部的 html代码（对于自结束标签没有意义)
innerText – 获取到元素内部的文本内容，它和innerHTML类似，不同的是它会自动将html去除

8、获取其他

• document.body
   - 获取body标签
• document.documentElement
   - 保存的是html根标签
• document.all
   - 代表页面中所有的元素
• document.getElementsByClassName("")
   - 根据class属性值获取一组元素节点对象（不支持IE8及以下的浏览器）
• document.querySelector("")
   - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
   - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
   - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
• document.querySelectorAll("")
   - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
   - 即使符合条件的元素只有一个，它也会返回数组

9、DOM增删改

• 创建节点
   – 创建元素节点    document.createElement(标签名)
   – 创建文本节点    document.createTextNode(文本内容)
• 删除节点
   – 删除一个子节点    父节点.removeChild(子节点)
   – 常用：子节点.parentNode.removeChild(子节点);
• 替换节点
   – 使用指定的子节点替换已有的子节点    父节点.replaceChild(新节点, 旧节点)
• 插入节点
   – 向一个父节点中添加一个新的子节点    父节点.appendChild(子节点)
   – 在指定的子节点前插入新的子节点    父节点.insertBefore(新节点 , 旧节点)
• 使用innerHTML也可以完成DOM的增删改的相关操作（动静大）
一般我们会两种方式结合使用

10、DOM操作CSS

• 修改元素的样式
语法：元素.style.样式名 = 样式值

CSS的样式名中含有-，在JS中不合法，比如background-color；
需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写
通过style属性设置的样式都是内联样式，内联样式有较高的优先级

• 读取元素的样式
语法：元素.style.样式名

通过style属性设置和读取的都是内联样式

• 获取元素的当前显示的样式（IE浏览器）（只读）
语法：元素.currentStyle.样式名

• 获取元素当前的样式（在其他浏览器中）（只读）
语法：getComputedStyle(要获取样式的元素，可以传递一个伪元素一般都传null).样式名
这个方法是window的方法，可以直接使用

• 通用

   /*
    * 定义一个函数，用来获取指定元素的当前的样式
    * 参数：
    *   obj 要获取样式的元素
    *   name 要获取的样式名
    */
   
   function getStyle(obj , name){
    
	    if(window.getComputedStyle){
	     //正常浏览器的方式，具有getComputedStyle()方法
	     return getComputedStyle(obj , null)[name];
	    }else{
	     //IE8的方式，没有getComputedStyle()方法
	     return obj.currentStyle[name];
	    }
	    
	    //return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
	    
   }