速通JavaScript难点——DOM_javascript 速通-CSDN博客

DOM 这是核心部分

文档对象模型(DOM) 可以将 web 页面 与 脚本或编程语言 连接起来

初识DOM

web页面

这里的 web 页面，也就是之前我们用 HTML 和 CSS 绘制的页面，也称作为文档

脚本或编程语言 为什么这里不直接说将 Web 页面和 Javascript 语言连接起来，而要绕一下说脚本或编程语言呢?

因为 DOM 是一种规范，或者是一种约定，只要遵循这个规范，那么无论是 Javascript ，还是python ，或者 java 都可以被连接起来。

➤DOM映射：像HTML和xml文档都是树状结构，web网页最终会映射为一颗DOM树，DOM树连接js语言

DOM 树特性：（树）

树根是 DOCUMENT，也可以称为整个页面文档

每个 HTML 标签我们称之为 DOM 节点，英文为Node或者Element

每个 HTML 标签包裹的子标签，在树上体现为分支，称为儿子节点。比如上图，p和H1 都是 div 的儿子节点。 div 同样也是 Body 的儿子节点。

儿子节点类推可以得知P,H1 是 Body 的孙子节点

所有P，H1 的长辈，我们称为P和 H1 的祖先节点,

P，H1 是亲兄弟，我们称为兄弟节点。

Google插件可以帮助初学者理清网页中的DOM树
在这里插入图片描述

在这里插入图片描述

访问

DOCUMENT 元素会存在全局变量 window 下面

console.log(window.document);
//或者
document+敲回车

在这里插入图片描述

选择器查询 querySelector

document.querySelector(div);//从上往下第一个
document.querySelector('main .core .subtitle');

迭代查询

let subtitle = document.querySelector('main .core .subtitle');
let a = subtitle.querySelector("a");
console.log(a);

选择器全量查询 querySelectorAll()

document.querySelectorAll('input');

在浏览器的console里也可以通过get来查看当前页面的dom内容（用得不多）

document
document.getElementById
document.getElementByName
document.getElementByClassName
document.getElementByTagName

DOM属性

<!-- HTMLDocument 根文档 -->
<html>
  ……
</html>

<!-- HTMLDivElement DIV类型 -->
<div class="subtitle">
  ……
</div>

<!-- HTMLAnchorElement 超链接类型 -->
<a class="free-bright">免费靓号</a>

<!-- HTMLInputElement Input类型 -->
<input class="password" type="pasworkd" placeholder="请输入密码" />

每一种HTML标签都有一种DOM类型对应

对应MDN

元素节点
特性节点
文本节点

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>标题</title>
</head>
<body>
  <div id="test"></div>
  <script src="./index.js"></script>
</body>

let divDom = document.