常用的 DOM 方法

ゝ一纸荒年。 2023-10-06 22:18 36阅读 0赞

#### 阅读目录 ####

*  HTML DOM 树
 *  问题
 *  DOM对象常用对象的方法和属性
 *   *  HTML文档中的常用节点类型
     *  常用的Document的方法
     *  Element常用的属性和方法
     *  Node常用的属性和方法
 *  DOM对象的常用方法示例
 *   *  1、document 对象
     *  2、location
     *  3、innerText，innerHTML
     *  4、Element 元素
     *  5、Element 创建和添加元素
     *  6、属性操作
 *  DOM 事件处理
 *   *  DOM0级事件处理
     *  DOM2级事件处理程序
     *  创建DOM节点、添加DOM节点、设置节点属性
     *  测试代码
 *  DOM中Event 对象使用
 *   *  获取鼠标哪个键的点击
     *  获取光标的坐标
 *  事件句柄　(Event Handlers)
 *   *  鼠标 / 键盘属性
     *  标准 Event 属性
     *  标准 Event 方法

## HTML DOM 树 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_20_color_FFFFFF_t_70_g_se_x_16]  
1、document属性和方法：  
document 的属性有 head，body 之类，方法有各种获取 element 的方法。

2、element的属性和方法：  
属性比如 style，innerHTML 和固有属性，方法比如各种动态操作元素，  
比如 createElement，还有操作属性的 set、get、remove、create 解 Attribute。

3、attribute 的属性和方法：有点包含在element 里面的感觉

## 问题 ##

1、我们熟知 location 是 window 的属性或者说对象，那么 document 对象有 location 属性么？

解答：window 有 location 对象，document 同样有 location 对象。

2、如何获取一个html的文档声明？

解答：document.doctype; 可以知道文档声明，如果没有 return null; 这里是 `<!DOCTYPE html>`

3、一个有如下 `<!DOCTYPE html>` 文档声明的 html 文档，它的文档声明的名字是什么？

解答：html

4、如何获取一个 html 的 head 部分？

解答：document.head；很明显选取 head 节点.就是`·<head></head>` 这段 。

5、如何获取一个 html 的 body 部分？

解答：document.body；选取 body 节点.

6、如何获取一个文档的文档声明的名字？

解答：document.doctype.name；知道文档声明的名字.

7、document 的 location 属性是来干嘛的？

解答：location 一般主要是用来获取地址。

8、如何获取一个文档当前的地址？

解答：document.location.href; 获取当前地址

9、给文档重新分配地址的三种方法是哪三种？

解答：分别是 location 的 assign 方法和 href 属性。

`document.location.assign(http://www.baidu.com)` 分配一个地址 `document.location="http://www.baidu.com"`  
`document.location.href="http://www.baidu.com"`

10、innerText 和 innerHTML 的区别是什么（两点区别）？

解答：一个是获取文本，一个是获取标签。 innerText是IE特有，innerHTML则是符合W3C协议的。

11、innerText 里面的标签还是标签么？

解答：不是，已经转义为了文本。

12、element 常用的几个属性是哪几个？

解答：id、nodeName、className、child、lastchild、firstchild、nextSibing、previousSibing

13、如何通过DOM2方法获取一个标签？

解答：`var d=document.querySelector("#p1");`

14、DOM2 获取一个标签的两个常见方法是哪两个？

解答：querySelector 和 querySelectorAll

15、querySelector 和 querySelectorAll 和区别是什么？

解答：前者获取一个，后者获取所有对应标签的。

16、如何在body中把 b 标签插入到 a 标签之前？

解答：`document.body.insertBefore(b,a);` 把b插在a前面

17、insertBefore 除了成为普通元素的方法，可否成为 body 的方法？

解答：肯定可以啊

18、在 body 中用 c 标签替换 b 标签怎么实现？

解答：`document.body.replaceChild(c,b);` //（new,old）

19、属性操作的四个方法是哪四个？

解答：set，get，create，remove，后面分别接 Attribute

20、DOM 0点击事件怎么写？

解答：`a.onclick=function(){}`

21、DOM2点击事件怎么写？

解答：`btn.addEventListener("click",fun,false)`

22、DOM2中主要操作事件的两个方法是哪两个？

解答：add 和 remove 接 EventListener

23、`btn.addEventListener("click",fun,false)` 中的第三个参数是什么意思？

解答：如果是 true 就是在事件捕获阶段调用，如果是 false 则是在事件冒泡阶段调用。

24、这样用 `removeEventListener("click",function(){})` 有效果么？

解答：这样是没有效果的。虽然是一个函数，但是JS会认为传入了一个另外一个函数，虽然和之前一个一模一样。

25、IE事件调用的方法是什么？

解答：IE用的是 attach 的方式，`a.attachEvent("onclick",function(){}`

## DOM对象常用对象的方法和属性 ##

### HTML文档中的常用节点类型 ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <strong>接口</strong> 
    </div> </td> 
   <td> 
    <div> 
     <strong>nodeType</strong> 
    </div> </td> 
   <td> 
    <div> 
     <strong>备注</strong> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      Element 
    </div> </td> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div>
      元素节点 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      Text 
    </div> </td> 
   <td> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div>
      文本节点 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      Document 
    </div> </td> 
   <td> 
    <div>
      9 
    </div> </td> 
   <td> 
    <div>
      Document 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      Comment 
    </div> </td> 
   <td> 
    <div>
      8 
    </div> </td> 
   <td> 
    <div>
      注释文本 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      DocumentFragment 
    </div> </td> 
   <td> 
    <div>
      11 
    </div> </td> 
   <td> 
    <div>
      Document片段 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      Attribute 
    </div> </td> 
   <td> 
    <div>
      2 
    </div> </td> 
   <td> 
    <div>
      节点属性 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

### 常用的Document的方法 ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <strong>方法</strong> 
    </div> </td> 
   <td> 
    <div> 
     <strong>描述</strong> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      createAttribute() 
    </div> </td> 
   <td> 
    <div>
      用指定的名字创建新的Attribute节点 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      createComment() 
    </div> </td> 
   <td> 
    <div>
      用指定的字符串创建新的Comment节点 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      createElement() 
    </div> </td> 
   <td> 
    <div>
      用指定的标记名创建新的Element节点 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      createTextNode() 
    </div> </td> 
   <td> 
    <div>
      用指定的文本创建新的TextNode节点 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      getElementId() 
    </div> </td> 
   <td> 
    <div>
      返回文档中具有指定id属性的Element节点 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      getElementByTagName() 
    </div> </td> 
   <td> 
    <div>
      返回文档中具有指定标记名的所有Element节点 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

### Element常用的属性和方法 ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <strong>方法/</strong> 
     <strong>属性</strong> 
    </div> </td> 
   <td> 
    <div> 
     <strong>描述</strong> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      tagName 
    </div> </td> 
   <td> 
    <div>
      以字符串形式返回指定属性的值 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      getAttributeNode() 
    </div> </td> 
   <td> 
    <div>
      以Attribute节点的形式返回指定属性的值 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      getElementByTagName() 
    </div> </td> 
   <td> 
    <div>
      返回一个Node数组，包含具有指定标记名的所有Element节点的子孙节点，其顺序为在文档中出现的顺序 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      hasAttribute() 
    </div> </td> 
   <td> 
    <div>
      如果该元素具有指定名字的属性，则返回true 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      removeAttribute() 
    </div> </td> 
   <td> 
    <div>
      从元素中删除指定的属性 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      removeAttributeNode() 
    </div> </td> 
   <td> 
    <div>
      从元素的属性列表中删除指定的Attribute节点 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      setAttribute() 
    </div> </td> 
   <td> 
    <div>
      把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      setAttributeNode() 
    </div> </td> 
   <td> 
    <div>
      把指定的Attribute节点添加到该元素的属性列表中 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

### Node常用的属性和方法 ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <strong>方法/</strong> 
     <strong>属性</strong> 
    </div> </td> 
   <td> 
    <div> 
     <strong>描述</strong> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      Attributes 
    </div> </td> 
   <td> 
    <div>
      如果该节点是一个Element,则以NamedNodeMap形式返回该元素的属性 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      childNodes 
    </div> </td> 
   <td> 
    <div>
      以Node[]的形式存放当前节点的子节点，如果没有节点，则返回空数组 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      firstChild 
    </div> </td> 
   <td> 
    <div>
      以Node的形式返回当前节点的第一个节点，如果没有节点则返回NULL 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      lastChild 
    </div> </td> 
   <td> 
    <div>
      以Node的形式返回当前节点的最后一个节点，如果没有节点则返回NULL 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      parentNode 
    </div> </td> 
   <td> 
    <div>
      以Node的形式返回当前节点的父节点，如果没有节点则返回NULL 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      previousSibling 
    </div> </td> 
   <td> 
    <div>
      以Node的形式返回紧挨当前节点，位于它之前的兄弟节点，如果没有这样的节点则返回NULL 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      nextSibling 
    </div> </td> 
   <td> 
    <div>
      以Node的形式返回当前节点的下一个兄弟节点，如果没有节点则返回NULL 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      nodeName 
    </div> </td> 
   <td> 
    <div>
      节点的名字，Element节点则代表Element标记的名称 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      nodeType 
    </div> </td> 
   <td> 
    <div>
      代表节点的类型 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      appendChild() 
    </div> </td> 
   <td> 
    <div>
      通过把一个节点增加到当前节点的childNode[]组，给文档树增加节点 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      cloneNode() 
    </div> </td> 
   <td> 
    <div>
      复制当前节点，或者复制当前节点以及它的所有子孙节点 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      hasChildNodes() 
    </div> </td> 
   <td> 
    <div>
      如果当前节点拥有子结点，则返回true 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      insertBefore() 
    </div> </td> 
   <td> 
    <div>
      给文档树插入一个节点，位置在当前节点的指定位置之前，如果该节点已经存在，则删除之，然后再将节点插入到它的位置。 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      removeChild() 
    </div> </td> 
   <td> 
    <div>
      从文档树中删除并返回指定的子结点 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div>
      replaceChild() 
    </div> </td> 
   <td> 
    <div>
      从文档树中删除并返回指定的子结点，用另一个节点替代它。 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## DOM对象的常用方法示例 ##

以上面 code 为例子

### 1、document 对象 ###

//可以知道文档声明，如果没有return null;这里是<!DOCTYPE html>
    document.doctype;
    
    //知道文档声明的名字.
    document.doctype.name
    
    //很明显选取head节点.就是<head></head>这段
    document.head
    
    //选取body节点.
    document.body

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_10_color_FFFFFF_t_70_g_se_x_16]

### 2、location ###

我记得 location一般主要是用来获取地址。  
常用方法：

//获取当前地址
    document.location.href
    
    //分配一个地址
    document.location.assign(http://www.baidu.com)
    
    外如果href 是获取当前地址，如果给他赋值，把一个地址给他，也能达到assign的效果；
    document.location="http://www.baidu.com"
    
    或者
    document.location.href="http://www.baidu.com"

### 3、innerText，innerHTML ###

这二个放一起说，主要是都挺像的，这两个的作用都是往文档中写出内容。

但是区别主要是：

`document.body.innerText("Z-ONE")` 主要是写入一个纯文本内容，此时 `<span>` 并不是标签。

而是一个文本 `"<span>"`.(其实这样也显得 innerText 的安全性高一点)

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_16_color_FFFFFF_t_70_g_se_x_16]  
`document.body.innerHTML("z-one")` 也是写入一个纯文本内容，但是不会将HTML标签进行转义。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_15_color_FFFFFF_t_70_g_se_x_16]  
 另外 innerHTML 是符合 W3C 协议的，而 innerText 只适用于IE浏览器。

### 4、Element 元素 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Z-one</title>
    </head>
    
    <body>
      <p id="p1" class="p">测试</p>
      <p id="p2" class="p">测试</p>
      <p id="p3" class="p">测试</p>
    
      <script>
        //获取上面那个例子的p1元素.
        var a = document.getElementById("p1")
    
        // 获取该元素的id... "p1" (貌似就是通过p1找到的他- -)
        a.id
    
        //获取到节点的名字(就是标签名字) 这里是"p"
        a.nodeName
    
        //获取节点的class名字，这里因为关键字的原因，只能用className;
        a.className
        
        另外还有一些
        child//获取子元素  这里没有
        lastchild//最后一个子元素.
        firstchild//第一个子元素.
        nextSibling//下一个兄弟元素.
        previousSibing//上一个兄弟元素.
      </script>
    </body>
    </html>

应用示例

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Z-one</title>
    </head>
    
    <body>
      <p id="p1" class="p">测试</p>
      <p id="p2" class="p">测试</p>
      <p id="p3" class="p">测试</p>
    
      <script>
        window.onload = function () {
          
          //用id获取第二个p标签的元素
          var a = document.getElementById("p2");
          a.style.color = "red";
    
          //用标签名字来获取第一个p标签;
          var b = document.getElementsByTagName("p")[0]//获取的是一个集合,
          b.style.fontSize = "30px";//这里font-size,会报错,就用fontSize;
    
          //用类名来获取第三个标签.
          var c = document.getElementsByClassName("p")[2]//和上面一个道理
          c.style.fontWeight = "bold";
          
          //通过DOM2的方法获取第1个标签;
          var d = document.querySelector("#p1");
          //如果是queryselectorAll() 就是获取一个集合,操作方式和上面类似。
          //这里是通过类名，如果是ID就用#p1 标签就用p,一般是获取第一个元素.这点和Tag和Class都不一样
          d.style.color = "green";
        }
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_20_color_FFFFFF_t_70_g_se_x_16 1]

### 5、Element 创建和添加元素 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_19_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>创建元素</title>
    </head>
    <script>
      window.onload = function () {
          
        var a = document.createElement("div");
        a.className = "p1"
        a.innerHTML = ("<span>测试下</span>");
    
        //添加到文档中
        document.body.appendChild(a);//这下子元素就写进去了
    
        //如果还要添加 可以照着上面来，我们现在就添加一个元素进去
        var b = document.createElement("div");
        b.innerHTML = "<p>测试第二弹</p>";
    
        //这次我们添加在上一个元素前面
        document.body.insertBefore(b, a);//把b插在a前面- -
        
        //这时候不想要b了，想替换掉，可以这么做!
        var c = document.createElement("div");
        c.innerHTML = "我就是来替换的";
        document.body.replaceChild(c, b);//（new,old）
      }
    </script>
    <body>
    
    </body>
    </html>

### 6、属性操作 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>创建元素</title>
    </head>
    <body>
      <div id="x1" class="p1"></div>
    
      <script>
        var a = document.getElementById("x1");
        a.getAttribute("id");//获取该阶段的属性：id
        a.setAttribute("id", "Z-one");//设置一个属性。
        a.removeAttribute("id")//删除ID节点
      </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_20_color_FFFFFF_t_70_g_se_x_16 2]

## DOM 事件处理 ##

### DOM0级事件处理 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>创建元素</title>
    </head>
    <body>
    <input type="button" id="a" value="按钮">
    
    <script>
    var a=document.getElementById("a");
    a.onclick=function(){
          
      console.log("测试一下");
    }
    //这样点击按钮就会在控制台输出测试一下
    </script>
    </body>
    </html>

![在这里插入图片描述][65ec4b8b18b949738f69d3ee4ee1198f.png]

### DOM2级事件处理程序 ###

这里前面区别开来，就是我是你的升级版！。

出了这两个方法  
`addEventListener();` //添加  
`removeEventListener();` //去除

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>创建元素</title>
    </head>
    
    <body>
    <input type="button" value="按钮">
    
    <script>
    var fun = function () {
          
      console.log("测试一下");
    }
    var btn = document.querySelector("input");
    btn.addEventListener("click", fun, false)
    btn.removeEventListener("click", fun, false)
    //如果是true 就是在事件捕获阶段调用，如果是false则是在事件冒泡阶段调用。
    //另外如果这里要用removeEventListener("click",function(){})//这样是没有效果的。虽然是一个函数，但是JS会认为传入了一个另外一个函数，虽然和之前一个一模一样。
    </script>
    </body>
    </html>

![在这里插入图片描述][fb6d029abae54165ad15131e89eea0c8.png]

### 创建DOM节点、添加DOM节点、设置节点属性 ###

![在这里插入图片描述][062c87201bc845d88fc5feef3b71e83a.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>核心DOM操作</title>
    </head>
    <body>
    <script>
    //创建DOM节点
    var div1 = document.createElement("div");
    var txt1 = document.createTextNode("穿梭");
    
    //添加DOM节点
    div1.appendChild(txt1);
    document.body.appendChild(div1);
    
    //创建水平线节点
    var hr1 = document.createElement("hr");
    
    //水平线节点添加到body上
    document.body.appendChild(hr1);
    
    var marquee1 = document.createElement("marquee");
    var img1 = document.createElement("img");
    
    //设置节点属性
    img1.setAttribute('src', 'https://img-home.csdnimg.cn/images/20211025054554.png');
    img1.setAttribute('width', '200px');
    img1.setAttribute('height', '200px');
    
    //图片节点添加到marquee节点上
    marquee1.appendChild(img1);
    document.body.appendChild(marquee1);
    
    /*
    HTML marquee 元素（<marquee>） 用来插入一段滚动的文字。
     <marquee> 元素已经 过时，请不要再使用。尽管一些浏览器仍然支持它，但它不是必须的。
    */
    </script>
    </body>
    </html>

### 测试代码 ###

![在这里插入图片描述][3a633efa506b42348bf5a4ab090a8f29.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body id="body">
    
      <div id="div1">
        321321
      </div>
    
      <button onclick="add_h3()">add_h3</button>
    
      <hr>
      <a id="a_1" name='tag_name' href="www.baidu.com">链接1</a>
      <a name='tag_name' href="">链接2</a>
      <a name='tag_name' href="">链接3</a>
      <a name='tag_name' href="">链接4</a>
    
      
      <button onclick="testGetAttribute()">点我</button>
      <hr>
    
      <ul id="ul_1">1
        <li>javascript</li>3
        <li>jquery</li>5
        <li>html</li>7
      </ul>
    
      <button onclick="remove_child_test()">我就是看你不爽，我就要删了你</button>
      <hr>
      <button onclick="test_parentNode()">获取body</button>
      111
    
      <div id="marquee_test">
    
      </div>
      332
      <button onclick="test_sibling()">测试上下兄弟</button>
      <button onclick="add_marquee()">添加跑马灯标签</button>
      
      
      
      <hr>
    
      <script>
        var ul_1_aa = document.getElementById('ul_1');
        var ul_1 = document.getElementById('ul_1').childNodes;
        console.log(ul_1.length+" - childNodes");
        // console.log(ul_1[0]);
        // console.log(ul_1_aa.firstChild);
    
        console.log(ul_1[6]);
        console.log(ul_1_aa.lastChild);
            // console.log(ul_1[1]);
            // console.log(ul_1[2]);
            // console.log(ul_1[3]);
            // console.log(ul_1[4]);
            // console.log(ul_1[5]);
            // console.log(ul_1[6]);
            // console.log(ul_1[0].nodeType);
      </script>
      <ul>1<li>2</li>3</ul>
    </body>
    <script>
      //你知道dom操作是用js操作dom树的原理，并且知道几个核心函数，要用的时候不熟悉的函数直接去查文档
      //查文档的话可以直接百度 ‘dom 操作’或‘dom 操作教程’ 关键词
      /*常用函数*/
      //1、document.getElementById('div1');
    
      //标签之间，如果有文本，就是文本节点，如果没有，就是空白节点
      //<ul>1<li>2</li>3</ul> 1,2,3的位置都是这样，1、3是儿子，2是孙子
    
    
      // var div1=document.getElementById('div1');
      //console.log(div1);
      // console.log(div1.nodeValue);
    
    
      //var innerHTML=div1.innerHTML;
      var body_1 = document.getElementsByTagName('body');
      var body1 = body_1[0];
      //div1.removeChild(Node);
      // console.log(div1);
      //console.log(innerHTML);
      //console.log(body_1);
    
      function testGetAttribute() {
          
        var a_1 = document.getElementById('a_1');
        var a_1_href = a_1.getAttribute('href');
        console.log(a_1_href);
        console.log(a_1_href.nodeValue + '   :a_1_href.nodeValue');
        a_1.setAttribute('a_id', '7865');
      }
    
      function getAElements() {
          
        var aa = document.getElementsByName('tag_name');
        console.log(aa.length);
        console.log(aa);
      }
    
    
      //1.现在的目标，给div增加一个h3，h3里面的文本内容是‘还我命来’，h3还有一个属性是‘huai_ren’，值是‘fry’
      function add_h3() {
          
        var div1 = document.getElementById('div1');
        var h3_1 = document.createElement("h3");
        var str1 = document.createTextNode('还我命来');
        h3_1.append(str1);
        h3_1.setAttribute('huai_ren', 'fry');
        div1.append(h3_1);
      }
    
      function add_marquee() {
          
        // var div1=document.getElementById('marquee_test');
        var body1 = document.getElementById('body');
        var marquee_1 = document.createElement("marquee");
        var img_1 = document.createElement("img");
        img_1.setAttribute('src', 'https://img-home.csdnimg.cn/images/20201124032511.png');
        marquee_1.append(img_1);
        // div1.append(marquee_1);
        body1.append(marquee_1);
      }
    
      //目标：我们想在body里面删了ul标签
      function remove_child_test() {
          
        var body1 = document.getElementById('body');
        var ul_1 = document.getElementById('ul_1');
        body1.removeChild(ul_1);
      }
    
      //目标：获取 id为marquee_test标签的父节点
      function test_parentNode() {
          
        var marquee_test = document.getElementById('marquee_test');
        console.log(marquee_test.parentNode);
      }
    
      //目标：获取 id为marquee_test标签 的  上一个兄弟和下一个兄弟
      function test_sibling() {
          
        var marquee_test = document.getElementById('marquee_test');
        console.log(marquee_test.nextSibling);
      }
    </script>
    
    </html>

## DOM中Event 对象使用 ##

1、将 event 作为参数传递进来，然后就可以调用 event 对象的各种属性和方法了。

2、事件通常与函数结合使用，函数不会在事件发生前被执行！

之前：

1、包括页面事件和键盘鼠标等外设的事件，就是监听所有对它可能影响的操作

2、先记住四个，onclick，onblur，onchange，onfocus

3、如何使用 dom 中 event 对象？

解答：将event作为参数传递进来，然后就可以调用event对象的各种属性和方法了。
    <body onmousedown="whichButton(event)">
    event.button;
    event.clientX

4、如何判断哪个鼠标按钮被点击？

解答：`event.button; event` 事件的 button 属性。

5、如何判断光标的坐标是？

解答：event.clientX。dom 中 event 对象的 clientX 和 clientY 属性。

### 获取鼠标哪个键的点击 ###

![在这里插入图片描述][f7d3d7e6f0704fd1a9c9215fbe35ecab.gif_pic_center]

<html>
    <head>
    <script type="text/javascript">
      function whichButton(event) {
          
        var btnNum = event.button;
        if (btnNum == 2) {
          
          alert("您点击了鼠标右键！")
        }
        else if (btnNum == 0) {
          
          alert("您点击了鼠标左键！")
        }
        else if (btnNum == 1) {
          
          alert("您点击了鼠标中键！");
        }
        else {
          
          alert("您点击了" + btnNum + "号键，我不能确定它的名称。");
        }
      }
    </script>
    </head>
    <body onmousedown="whichButton(event)">
      <p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
    </body>
    </html>

### 获取光标的坐标 ###

![在这里插入图片描述][eb93e33d104b4adda899f9f861352082.gif_pic_center]

<html>
    <head>
      <script type="text/javascript">
        function show_coords(event) {
          
          x = event.clientX
          y = event.clientY
          alert("X 坐标: " + x + ", Y 坐标: " + y)
        }
      </script>
    </head>
    
    <body onmousedown="show_coords(event)">
    
      <p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
    
    </body>
    </html>

## 事件句柄　(Event Handlers) ##

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>此事件发生在何时...</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onabort.asp" rel="nofollow">onabort</a></td> 
   <td>图像的加载被中断。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onblur.asp" rel="nofollow">onblur</a></td> 
   <td>元素失去焦点。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onchange.asp" rel="nofollow">onchange</a></td> 
   <td>域的内容被改变。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onclick.asp" rel="nofollow">onclick</a></td> 
   <td>当用户点击某个对象时调用的事件句柄。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_ondblclick.asp" rel="nofollow">ondblclick</a></td> 
   <td>当用户双击某个对象时调用的事件句柄。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onerror.asp" rel="nofollow">onerror</a></td> 
   <td>在加载文档或图像时发生错误。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onfocus.asp" rel="nofollow">onfocus</a></td> 
   <td>元素获得焦点。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onkeydown.asp" rel="nofollow">onkeydown</a></td> 
   <td>某个键盘按键被按下。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onkeypress.asp" rel="nofollow">onkeypress</a></td> 
   <td>某个键盘按键被按下并松开。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onkeyup.asp" rel="nofollow">onkeyup</a></td> 
   <td>某个键盘按键被松开。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onload.asp" rel="nofollow">onload</a></td> 
   <td>一张页面或一幅图像完成加载。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onmousedown.asp" rel="nofollow">onmousedown</a></td> 
   <td>鼠标按钮被按下。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onmousemove.asp" rel="nofollow">onmousemove</a></td> 
   <td>鼠标被移动。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onmouseout.asp" rel="nofollow">onmouseout</a></td> 
   <td>鼠标从某元素移开。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onmouseover.asp" rel="nofollow">onmouseover</a></td> 
   <td>鼠标移到某元素之上。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onmouseup.asp" rel="nofollow">onmouseup</a></td> 
   <td>鼠标按键被松开。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onreset.asp" rel="nofollow">onreset</a></td> 
   <td>重置按钮被点击。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onresize.asp" rel="nofollow">onresize</a></td> 
   <td>窗口或框架被重新调整大小。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onselect.asp" rel="nofollow">onselect</a></td> 
   <td>文本被选中。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onsubmit.asp" rel="nofollow">onsubmit</a></td> 
   <td>确认按钮被点击。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_onunload.asp" rel="nofollow">onunload</a></td> 
   <td>用户退出页面。</td> 
  </tr> 
 </tbody> 
</table>

### 鼠标 / 键盘属性 ###

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_altkey.asp" rel="nofollow">altKey</a></td> 
   <td>返回当事件被触发时，"ALT" 是否被按下。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_button.asp" rel="nofollow">button</a></td> 
   <td>返回当事件被触发时，哪个鼠标按钮被点击。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_clientx.asp" rel="nofollow">clientX</a></td> 
   <td>返回当事件被触发时，鼠标指针的水平坐标。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_clienty.asp" rel="nofollow">clientY</a></td> 
   <td>返回当事件被触发时，鼠标指针的垂直坐标。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_ctrlkey.asp" rel="nofollow">ctrlKey</a></td> 
   <td>返回当事件被触发时，"CTRL" 键是否被按下。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_metakey.asp" rel="nofollow">metaKey</a></td> 
   <td>返回当事件被触发时，"meta" 键是否被按下。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_relatedtarget.asp" rel="nofollow">relatedTarget</a></td> 
   <td>返回与事件的目标节点相关的节点。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_screenx.asp" rel="nofollow">screenX</a></td> 
   <td>返回当某个事件被触发时，鼠标指针的水平坐标。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_screeny.asp" rel="nofollow">screenY</a></td> 
   <td>返回当某个事件被触发时，鼠标指针的垂直坐标。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_shiftkey.asp" rel="nofollow">shiftKey</a></td> 
   <td>返回当事件被触发时，"SHIFT" 键是否被按下。</td> 
  </tr> 
 </tbody> 
</table>

### 标准 Event 属性 ###

下面列出了 2 级 DOM 事件标准定义的属性。

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_bubbles.asp" rel="nofollow">bubbles</a></td> 
   <td>返回布尔值，指示事件是否是起泡事件类型。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_cancelable.asp" rel="nofollow">cancelable</a></td> 
   <td>返回布尔值，指示事件是否可拥可取消的默认动作。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_currenttarget.asp" rel="nofollow">currentTarget</a></td> 
   <td>返回其事件监听器触发该事件的元素。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_eventphase.asp" rel="nofollow">eventPhase</a></td> 
   <td>返回事件传播的当前阶段。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_target.asp" rel="nofollow">target</a></td> 
   <td>返回触发此事件的元素（事件的目标节点）。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_timestamp.asp" rel="nofollow">timeStamp</a></td> 
   <td>返回事件生成的日期和时间。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_type.asp" rel="nofollow">type</a></td> 
   <td>返回当前 Event 对象表示的事件的名称。</td> 
  </tr> 
 </tbody> 
</table>

### 标准 Event 方法 ###

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_initevent.asp" rel="nofollow">initEvent()</a></td> 
   <td>初始化新创建的 Event 对象的属性。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_preventdefault.asp" rel="nofollow">preventDefault()</a></td> 
   <td>通知浏览器不要执行与事件关联的默认动作。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/event_stoppropagation.asp" rel="nofollow">stopPropagation()</a></td> 
   <td>不再派发事件。</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b8378539fc394ee29bf9257349e99cb3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2lsbGVtX3dn,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d7a0bdea8ed1473da5bd77d00f5ba0d5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2lsbGVtX3dn,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/759b7a97342a4158bda807274ee080fb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2lsbGVtX3dn,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1d70baa0646743c298507df7e9661221.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2lsbGVtX3dn,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/ebc6ce6cacfd466f94983b556abb9e96.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2lsbGVtX3dn,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/db6a2b8d10dd4019bf95a797bb2c06ba.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2lsbGVtX3dn,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/910a4815cca84da4b369dccb8d542aa4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2lsbGVtX3dn,size_20,color_FFFFFF,t_70,g_se,x_16
[65ec4b8b18b949738f69d3ee4ee1198f.png]: https://img-blog.csdnimg.cn/65ec4b8b18b949738f69d3ee4ee1198f.png
[fb6d029abae54165ad15131e89eea0c8.png]: https://img-blog.csdnimg.cn/fb6d029abae54165ad15131e89eea0c8.png
[062c87201bc845d88fc5feef3b71e83a.gif_pic_center]: https://img-blog.csdnimg.cn/062c87201bc845d88fc5feef3b71e83a.gif#pic_center
[3a633efa506b42348bf5a4ab090a8f29.gif_pic_center]: https://img-blog.csdnimg.cn/3a633efa506b42348bf5a4ab090a8f29.gif#pic_center
[f7d3d7e6f0704fd1a9c9215fbe35ecab.gif_pic_center]: https://img-blog.csdnimg.cn/f7d3d7e6f0704fd1a9c9215fbe35ecab.gif#pic_center
[eb93e33d104b4adda899f9f861352082.gif_pic_center]: https://img-blog.csdnimg.cn/eb93e33d104b4adda899f9f861352082.gif#pic_center