JS基础 DOM

Posted 2022-02-20 wgchen~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS基础 DOM相关的知识，希望对你有一定的参考价值。

阅读目录

基础知识
- 文档渲染
- 操作时机
- 节点对象
- 原型链
- 对象特征
常用节点
- DOCUMENT
- ID 获取元素
- links下面展示的是获取所有a标签
- anchors 获取锚点集合
- images 获取所有图片节点
节点属性
- nodeType 指以数值返回节点类型
- Prototype 使用对象的原型进行检测
- nodeName 指定节点的名称
- tagName 获取标签节点的名称
- nodeValue 获取节点值
- 树状节点
节点集合
- length 记录了节点元素的数量
- item 根据索引获取元素
- namedItem 按 name 或 id 属性来获取元素
动态与静态
- 动态特性
- 使用静态
遍历节点
- forOf 遍历迭代对象
- forEach 按顺序为数组中的每个元素调用一次函数
- call/apply
- Array.from 将类数组转换为数组
- 展开语法，使用点语法转换节点为数组
节点关系
- 基础知识
- 父节点集合
- 后代节点集合
标签关系
- 基础知识
- 按类名获取标签
标签获取
- getElementById 根据元素的 id 属性获取一个元素节点对象
- getElementsByName 返回带有指定名称的对象的集合
- getElementsByTagName 用于按标签名获取元素
- getElementsByClassName 按class样式属性值获取元素集合
样式选择器
- querySelectorAll 找出所有匹配的节点后，返回对应的元素节点数组
- querySelector 找到一个后立刻返回找到的第一个节点对象，如果没有则返回null
- matches 用于检测元素是否是指定的样式选择器匹配
- closest
- HTMLCollection 与 NodeList 的区别
- DOM HTMLCollection
标准属性
- 属性别名
- 操作属性
- 多类型
元素特征
- attributes
- 自定义特征
- 属性同步
创建节点
- append 添加元素
- createTextNode 创建文本对象并添加到元素中
- createElement 创建标签节点对象
- cloneNode 和 document.importNode 用于复制节点对象操作
节点内容
- innerHTML 向标签中添加 html 内容
- outerHTML与innerHTML的区别是包含父标签
- textContent与innerText是访问或添加文本内容到元素中
- outerText 设置(包括标签 || 不包括标签)对象的文本
- insertAdjacentText 将文本插入到元素指定位置
节点管理
- 推荐方法
- insertAdjacentHTML 将html文本插入到元素指定位置
- - 在 `div#app` 前添加HTML文本
- insertAdjacentElement() 方法将指定元素插入到元素的指定位置，包括以下位置
- - 在 `div#app` 前插入span标签
- 古老方法
- DocumentFragment
- - 解决以上问题可以使用以下几种方式
  - DocumentFragment 特点
表单控制
- 表单查找
样式管理
- 批量设置
- classList 对类单独进行控制
- 设置行样式
- - 样式属性设置
  - 批量设置行样式
- 获取样式
- - style 可以使用DOM对象的style属性读取行样式
  - getComputedStyle 获取所有应用在元素上的样式属性

基础知识

操作文档 html 的 JS 处理方式为 DOM 即 Document Object Model 文档对象模型。如果对HTML 很了解使用 DOM 并不复杂。

浏览器在加载页面是会生成 DOM 对象，以供我们使用 JS 控制页面元素。

文档渲染

浏览器会将HTML文本内容进行渲染，并生成相应的JS对象，同时会对不符规则的标签进行处理。

浏览器会将标签规范后渲染页面
目的一让页面可以正确呈现
目的二可以生成统一的JS可操作对象

标签修复

在html中只有内容 wgchen.blog.csdn.net 而没有任何标签时，通过浏览器的检查 > 元素标签查看会自动修复成以下格式的内容。

下面 H1 标签结束错误并且属性也没有引号，浏览器在渲染中会进行修复

<body>
  <h1 id=wg>后盾人<h1>
</body>

处理后的结果

表格处理

表格 tabel 中不允许有内容，浏览器在渲染过程中会进行处理

<table>
  wgchen.blog.csdn.net
  <tr>
    <td>csdn</td>
  </tr>
</table>

渲染后会添加t body 标签并将 table 中的字符移出

标签移动

所有内容要写在BODY标签中，下面的SCRIPT标签写在了BODY后面，浏览器渲染后也会进行处理。

<body></body>
<script>
  console.dir('wgchen.blog.csdn.net')
</script>

渲染后处理的结果

操作时机

需要保证浏览器已经渲染了内容才可以读取的节点对象，下例将无法读取到节点对象。

<script>
  const node = document.getElementById('wgchen')
  console.log(node) //null
</script>
<h1 id="wgchen">wgchen.blog.csdn.net</h1>

不过我们可以将脚本通过事件放在页面渲染完执行

<script>
  window.onload = () => 
    const node = document.getElementById('wgchen')
    console.log(node)
  
</script>
<h1 id="wgchen">wgchen.blog.csdn.net</h1>

或使用定时器将脚本设置为异步执行

<script>
  setTimeout(() => 
    const node = document.getElementById('wgchen')
    console.log(node)
  )
</script>
<h1 id="wgchen">wgchen.blog.csdn.net</h1>

也可以放在文档加载后的事件处理函数中

<script>
  window.onload = function () 
    let hd = document.getElementById('wgchen')
    console.log(hd)
  
</script>
<h1 id="wgchen">wgchen.blog.csdn.net</h1>

或将脚本设置在外部文件并使用 defer 属性加载，defer即会等到DOM解析后迟延执行

<script defer="defer" src="3.js"></script>
<div id="wgchen"></div>

节点对象

JS中操作DOM的内容称为节点对象（node)，即然是对象就包括操作NODE的属性和方法

包括12种类型的节点对象
常用节点为document、标签元素节点、文本节点、注释节点
节点均继承自Node类型，所以拥有相同的属性或方法
document是DOM操作的起始节点

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>wgchen</title>
  <link rel="shortcut icon" href="#" />
  <meta name="keywords" content="wgchen.blog.csdn.net">
</head>
<body id="wgchen">
  <!-- wgchen -->
</body>
<script>
	// document节点 noteType为9
  console.log(document.nodeType)
  
  // 第一个子节点为<!DOCTYPE html>，且nodetype为10
  console.log(document.childNodes.item(0).nodeType)
  
  // body 是标签节点 nodeType为1
  console.log(document.body.nodeType) 
  
  // body的属性节点 nodeType 为2
  console.log(document.body.attributes[0].nodeType)
  
	// body的第一个节点为文本节点，nodeType为3
  console.log(document.body.childNodes.item(0).nodeType)
  
  // body的第二个节点为注释，nodeType类型为8
  console.log(document.body.childNodes[1].nodeType)
</script>
</html>

原型链

在浏览器渲染过程中会将文档内容生成为不同的对象，我们来对下例中的 h1 标签进行讨论，其他节点情况相似。

不同类型节点由专有的构造函数创建对象
使用 console.dir 可以打印出DOM节点对象结构
节点也是对象所以也具有JS对象的特征

<h1 id="wgchen">wgchen.blog.csdn.net</h1>
<script>
  function prototype(el) 
    console.dir(el.__proto__)
    el.__proto__ ? prototype(el.__proto__) : ''
  
  const node = document.getElementById('wgchen')
  prototype(node)
</script>

最终得到的节点的原型链为

原型	说明
Object	根对象，提供hasOwnProperty等基本对象操作支持
EventTarget	提供addEventListener、removeEventListener等事件支持方法
Node	提供firstChild、parentNode等节点操作方法
Element	提供getElementsByTagName、querySelector等方法
HTMLElement	所有元素的基础类，提供childNodes、nodeType、nodeName、className、nodeName等方法
HTMLHeadingElement	Head标题元素类

我们将上面的方法优化一下，实现提取节点原型链的数组

<h2 id="h2 value">wgchen.blog.csdn.net</h2>
<input type="text" id="inputId" value="wgchen" />
<script>
    function prototype(el) 
        const prototypes = []
        prototypes.push(el.__proto__)
        prototypes.push(...(el.__proto__ ? prototype(el.__proto__) : []))
        return prototypes
    
    const h2 = document.querySelector('h2')
    const input = document.querySelector('input')

    console.log(prototype(input))
</script>

下面为标题元素增加两个原型方法，改变颜色与隐藏元素

<h2 onclick="this.color('red')">wgchen.blog.csdn.net</h2>
<script>
  const h2 = document.querySelector('h2')
  HTMLHeadingElement.prototype = Object.assign(HTMLHeadingElement.prototype, 
    color(color) 
      this.style.color = color
    ,
    hide() 
      this.style.display = 'none'
    ,
  )
</script>

对象特征

即然DOM与我们其他JS创建的对象特征相仿，所以也可以为DOM对象添加属性或方法。

对于系统应用的属性，应该明确含义不应该随意使用，比如 ID 是用于标识元素唯一属性，不能用于其他目地。

后面会讲到其他解决方案，来自定义属性，ID属性可以直接修改但是不建议这么做

<h2 id="hd">wgchen.blog.csdn.net</h2>
<script>
let hd = document.getElementById('hd')
hd.id = 'wgchen'
console.log(hd)
</script>

title 用于显示提示文档也不应该用于其他目地

<div id="hd">wgchen.blog.csdn.net</div>
<script>
  let hd = document.getElementById('hd')
  hd.title = 'wgchen'
  console.log(hd)
</script>

下面是为对象合并属性的示例

<div id="hd">wgchen.blog.csdn.net</div>
<script>

let hd = document.getElementById('hd')

Object.assign(hd, 
  //设置标签内容
  innerHTML: 'wgchen',
  color: 'red',
  change() 
    this.innerHTML = 'willem'
    this.style.color = this.color
  ,
  onclick() 
    this.change()
  ,
)

</script>

使用对象特性更改样式属性

<div id="hd">wgchen.blog.csdn.net</div>
<script>
  let hd = document.getElementById('hd')
  Object.assign(hd.style, 
    color: 'white',
    backgroundColor: 'red',
  )
</script>

常用节点

JS 提供了访问常用节点的 api

方法	说明
document	document是DOM操作的起始节点
document.documentElement	文档节点即html标签节点
document.body	body标签节点
document.head	head标签节点
document.links	超链接集合
document.anchors	所有锚点集合
document.forms	form表单集合
document.images	图片集合

DOCUMENT

document 是 window 对象的属性，是由 HTMLDocument 类实现的实例。

document 包含 DocumentType（唯一）或 html元素（唯一）或 comment 等元素

原型链中也包含 Node，所以可以使用有关节点操作的方法如 nodeType/NodeName等

console.dir(document.nodeType)
console.dir(document.nodeName)

使用title获取和设置文档标题

//获取文档标题
console.log(document.title)

//设置文档标签
document.title = 'wgchen-wgchen.blog.csdn.net'

获取当前URL

console.log(document.URL)

获取域名

console.log(document.domain) // tt.cc

获取来源地址

console.log(document.referrer)

系统针对特定标签提供了快速选择的方式

ID 获取元素

下面是直接使用 ID 获取元素（这是非标准操作，对浏览器有挑剔）

<div id="app">wgchen</div>
<script>
  // 直接通过 ID 获取元素（非标准操作）
  console.dir(app)
</script>

links下面展示的是获取所有a标签

<div name="app">
  <a href="">wgchen.blog.csdn.net</a>
  <a href="">blog</a>
</div>
<script>
  const nodes = document.links
  console.dir(nodes)
</script>

anchors 获取锚点集合

下例是获取锚点集合后能过锚点 name 属性获取元素

<div>
  <a href="" name="n1">wgchen.blog.csdn.net</a>
  <a href="" name="n2">blog</a>
</div>
<script>
  // 通过锚点获取元素
  console.dir(document.anchors.n2)
</script>

images 获取所有图片节点

下面是获取所有图片节点

<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<script>
  // 获取所有图片节点
  console.dir(document.images)
</script>

节点属性

不同类型的节点拥有不同属性，下面是节点属性的说明与示例

nodeType 指以数值返回节点类型

nodeType	说明
1	元素节点
2	属性节点
3	文本节点
8	注释节点
9	document对象

下面是节点 nodeType 的示例

<div id="app">
  <div class="wgchen" data="hd">wgchen.blog.csdn.net</div>
  <div class="willem">blog</div>
  <div class="ycc"><!-- 技术博客 --></div>
</div>
<script>
  const node = document.querySelector(`#app`)
  console.log(node.nodeType) //1
  console.log(node.firstChild.nodeType) //3
  console.log(node.attributes.id.nodeType) //2

  const xj = document.querySelector('.ycc')
  console.log(xj.childNodes[0].nodeType) //8
</script>

下面是根据指定的 nodeType 递归获取节点元素的示例

可获取文本、注释、标签等节点元素

<!-- 博客 -->
博客 wgchen.blog.csdn.net
<div id="app">
  <ul>
    <li>
      <span></span>
      <span>
        <!-- wgchen -->
      </span>
    </li>
    <li><span></span><span></span></li>
    <li><span></span><span></span></li>
  </ul>
</div>

<script>
  function all(el, nodeType = 1) 
    const nodes = []

    Array.from(el.childNodes).map(node => 
      if (node.nodeType == nodeType) nodes.push(node)

      if (node.nodeType == 1) nodesJS-DOM事件
 jQuery 遍历 – 后代
 jQuery遍历-后代
 Web开发——JavaScript库（jQuery遍历——后代）
 js怎么获取iframe页面中的dom元素
 Dojo 中有没有办法在 DOM 元素中查找所有小部件后代？