JavaScript：Dom详解

JavaScript由三部分组成：

JavaScript概述:是一种嵌在网页中的脚本语言。包括三部分:ECMAScript、DOM、BOM

Dom详解-

1：什么是Dom？

文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言( HTML或者XML)的标准编程接口。

2：Dom树：HTML DOM 模型被构造为对象的树。

• 文档:一个页面就是-个文档, DOM中使用document表示
• 元素:页面中的所有标签都是元素, DOM中使用element表示
• 节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node表示
•  DOM把树上里面的内容都看作是对象（对象有自己的属性和方法）

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素。
• JavaScript 能够改变页面中的所有 HTML 属性。
• JavaScript 能够改变页面中的所有 CSS 样式。
• JavaScript 能够对页面中的所有事件做出反应。

3：JS获取DOM元素的8种方式

3.1. 标签名获取元素（结果为数组）
3.2 类名获取元素（结果为数组）
3.3 id名获取元素
3.4 name属性获取元素（结果为数组）
3.5  获取html元素
3.6 获取body元素
3.7 获取所有类型的元素（获取单个）
3.8 获取所有类型的元素（获取多个多个）

  <script>
      // ### 获取dom元素的8种方式

      // 1.标签名获取元素（数组）
      let divs = document.getElementsByTagName("div");
      console.log(divs, divs[0], divs[1]);

      // 2.类名获取元素（数组）
      let boxes = document.getElementsByClassName("box");
      console.log(boxes, boxes[0]);

      // 3.id名获取元素
      let contaniner = document.getElementById(".container");
      console.log(container);

      // 4.name属性获取元素（数组）
      let searches = document.getElementsByName("search");
      console.log(searches, searches[0]);

      // 5.获取html元素
      let html = document.documentElement;
      console.log(html);

      // 6.获取body元素
      let body = document.body;
      console.log(body);

      // 7.获取所有类型的元素（单个）
      let div1 = document.querySelector("div"); //标签选择器
      console.log(div1);
      let box1 = document.querySelector(".box"); //类选择器
      console.log(box1);
      let div2 = document.querySelector("#container"); //id选择器
      console.log(div2);

      // 8.获取所有类型的元素（多个）
      let newDivs = document.querySelectorAll("div");
      console.log(newDivs, newDivs[0], newDivs[1]);
    </script>
————————————————
版权声明：本文为CSDN博主「imtanqin」的原创文章
原文链接：https://blog.csdn.net/qq_51634332/article/details/116905671

4：修改HTML的内容，属性，CSS样式：

内容：

document.getElementById(id).innerHTML=“abcd”;

document.getElementById(id).innerText=“xxxx”;

属性：

document.getElementById(id).attribute=新属性值

例：

document.getElementById("image").src="2.jpg";

CSS样式：

document.getElementById(id).style.property=新样式

例：

document.getElementById("p2").style.color="red";
document.getElementById("p2").style.backgroundColor="red";

//property遵守驼峰命名法

5：元素操作:增删改查

6:Dom事件:HTML DOM 允许我们通过触发事件来执行代码。