JavaScript - 初识 DOM

一只小网虫

已于 2022-04-25 15:55:56 修改

阅读量120

点赞数 1

分类专栏： JavaScript DOM操作文章标签： javascript vscode

于 2021-10-09 20:42:20 首次发布

本文链接：https://blog.csdn.net/m0_48407729/article/details/120671011

版权

JavaScript DOM操作专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、DOM(Document Object Model)

1.1 概念

文档对象模型，通过一段程序动态的访问和更新文档内容、结构和样式；

在 DOM 中就是将一个文档看做是一个节点树；

DOM 就是提供一系列方法（API）对这些节点进行增删改查。

2、节点

2.1 分类

元素节点（标签）

属性节点（标签上的属性）

文本节点（标签之间的文本）

2.2 获取元素节点的方法
  /*
   * DOM结构示例
  */

  <div id="box1" class="demo"  name="box_name">
  	<p>1</p>
  </div>
  <div id="box2" class="demo">

  </div>
  <p>2</p>
document.getElementByID（ID 名字） 通过id（唯一标识符）获取标签
  const box = document.getElementById('box');
document.getElementsByTagName(标签名字) 返回的是一个类似数组的集合
  const divs = document.getElementsByTagName('div'); 
document.getElementsByName（标签 name 属性）返回的是一个类似数组的集合；
  document.getElementsByName（'box_name'）
document.getElementsByClassName（标签 class 名字）返回的是一个类似数组的集合；
  document.getElementsByClassName（'demo'）
document.querySelector（部分选择器的写法） //返回匹配到的第一个
  //只会返回匹配到的第一个
  document.querySelector('#box1');
document.querySelectorAll（） //返回匹配到的所有
   //返回匹配到的所有
  document.querySelectorAll('.demo');
document.body 获取 body 标签

document.documentElement 获取Html标签

辅助方法

hasChildNodes() 判断是否有子节点，返回布尔值。

chidNodes 返回子节点列表。

firstChild 返回第一个子节点。

lastChild 返回最后一个子节点。

nextSibling 返回后面的兄弟节点。

previousSibling 返回前面的兄弟节点。

parentNode 返回父节点。

children 返回子元素节点。

2.3 属性节点操作
  // HTML5 中可以自定义属性，所有自定义属性以 data-自定义属性名
  <a href="#" id="link" class="l" data-big="www">
  	超链接
  </a>
.attributes：

取得所有的属性
  var link = document.getElementById('link')
  console.log(link.attributes);
元素.属性名

获取某个属性，但是获取 class 的时候要写 className。
  var link = document.getElementById('link');
  console.log(link.title);
  console.log(link.className);
  console.log(link.getAttribute('class'));
元素.getAttribute（属性名）

这种方法获取 class 可以直接写 class
  const link = document.getElementById('link');
  console.log(link.getAttribute('class'));
hasAttribute()

返回一个布尔值,表示是否有某个属性。
  console.log(link.hasAttribute('title'));
设置属性：

元素.属性名 = 属性值;
元素.setAttribute(属性名, 属性值);//避免设置失败 style 和 onclick
  const link = document.getElementById('link');
  link.setAttribute('title', '点击跳转');
元素.removeAttribute(属性名); //移除某个属性。
  const link = document.getElementById('link');
  link.removeAttribute('title');
HTML5中可以自己定义属性,所有自定义属性以 data-自定义属性名(一般用于保存属性)

自定义属性获取：
dataset

HTML5 自定义属性获取方法.

元素.dataset.属性名 //属性名不写 data-

2.4 文本节点操作
  <div id="demo">内容</div>
  <input type="text" id="txt" value="123">
  const demo = document.getElementById('demo');
innerHTML

可以重写标签中的内容,会解析成 HTML 的格式显示.
  demo.innerHTML = '动态添加的内容';
  demo.innerHTML = '<span>动态添加的内容</soan>';
innerText

可以重写标签中的内容,但是不会解析 HTML (会直接将标签当做内容展示)
  demo.innerText = '动态添加的内容';
  demo.innerText = '<a href="">链接</a>';
outerHTML

替换整个节点.
  demo.outerHTML = '<a href="">链接</a>';
value

获取/设置表单的值.
  document.getElementById('txt').value = '456';
2.5 节点属性

节点.NodeName

元素节点返回标签名;
属性节点返回属性名;
文本节点始终返回 #text;

节点．nodeValue

元素节点返回 undefined 或者 null
属性节点返回属性值;
文本节点返回文本.

元素.nodeType

元素节点返回 1;
属性节点返回 2;
文本节点返回 3;

3、CSS操作

元素.style.css属性
  注意: 设置的时候 是将css添加到行内的
  获取的时候,只能获取到行内的

  如果是设置 float,要写为 cssFloat
元素.style.cssText
  批量增加 css。

  注意: 会反覆盖原来的 style 
获取当前标签渲染后所有的样式

IE: element.currentStyle

window.getComputedStyle(element, null)

最佳修改 CSS 样式是直接修改元素的 class 类名

预先设置好我们需要的 CSS 样式, 在 DOM 操作时更改类名
 box.className = 'bg'

4、节点操作

  <button type="button" id="btn">操作</button>
  <div id="fa">
  	<div id="ch1" style="color: red;">
  		<p>ch1</p>
  	</div>
  </div>

  // js 代码 
  const btn = document.getElementById('btn');
  const fa = document.getElementById('fa');
  const ch1 = document.getElementById('ch1');
document.createElement(标签名)

创建一个元素节点(文本)
  const div = document.createElement('div');
document.createTextNode(文本)

创建节点文本
  const txt = document.createTextNode('文本');
parentNode.appendChild(子节点)

将子节点添加在父节点的最后.
  fa.appendChild(div);
  fa.appendChild(txt);
parentNode.insertBefore(newNode, oldNode)

将 newNode 插入到 olNode 之前
  // 将 div 插入到 ch1 之前
  fa.insertBefore(div, ch1);
parentNode.replaceChild(newNode, olNodde)

用 newNode 替换 olNode
  // 用 div 替换 ch1 
  fa.replaceChild(div, ch1);
parentNode.removeChild(子节点)

移除某个子节点.
  fa.removeChild(ch1);
cloneNode(bool)

克隆节点(复制节点)
  const newCh1 = ch1.cloneNode(true);
  fa.appendChild(newCh1);
如果 bool 为 ture 则完全克隆(所有的后代节点都会被克隆)
如果 bool 不写或者为false 则只会克隆标签和属性。