首页 / JAVASCRIPT / JavaScript 操作 DOM 总结

JavaScript 操作 DOM 总结

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript 操作 DOM 总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8544字，纯文字阅读大概需要13分钟。

内容图文

JavaScript 操作 DOM 总结 - 文章图片

基本概念

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

节点类型

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种。

Document：整个文档树的顶层节点
DocumentType：doctype标签（比如<!DOCTYPE html>）
Element：网页的各种HTML标签（比如<body>、<a>等）
Attribute：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段

浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。

如何确定节点类型

Node有一个属性nodeType表示Node的类型，不同节点的nodeType属性值和对应的常量如下

文档节点（document）：9，对应常量Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE
属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
文档类型节点（DocumentType）：10，对应常量Node.DOCUMENT_TYPE_NODE
注释节点（Comment）：8，对应常量Node.COMMENT_NODE

确定节点类型时，使用nodeType属性是常用方法。

var node = document.documentElement.firstChild;
if (node.nodeType === Node.ELEMENT_NODE) {
  console.log('该节点是元素节点');
}

这些Node类型中，我们最常用的就是 document，element，attribute这几种类型。

参考: https://wangdoc.com/javascript/dom/node.html

创建元素

createElement

document.createElement`方法用来生成元素节点，并返回该节点。

var div = document.createElement('div')

使用createElement要注意：通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档树中。

createTextNode

createTextNode用来创建一个文本节点，用法如下

var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);
// <div>Hello</div>

上面代码新建一个div节点和一个文本节点，然后将文本节点插入div节点。

这个方法可以确保返回的节点，被浏览器当作文本渲染，而不是当作 HTML 代码渲染。因此，可以用来展示用户的输入，避免 XSS 攻击。

var div = document.createElement('div');
div.appendChild(document.createTextNode('<span>Foo & bar</span>'));
console.log(div.innerHTML)
// &lt;span&gt;Foo &amp; bar&lt;/span&gt;

insertAdjacentElement

Element.insertAdjacentElement方法在相对于当前元素的指定位置，插入一个新的节点。该方法返回被插入的节点，如果插入失败，返回null。

element.insertAdjacentElement(position, element);

Element.insertAdjacentElement方法一共可以接受两个参数，第一个参数是一个字符串，表示插入的位置，第二个参数是将要插入的节点。第一个参数只可以取如下的值。

beforebegin：当前元素之前
afterbegin：当前元素内部的第一个子节点前面
beforeend：当前元素内部的最后一个子节点后面
afterend：当前元素之后

// HTML 代码：<body><div>some text</div></body>
var body = document.querySelector('body')
var p1 = document.createElement('p')
body.insertAdjacentElement('afterbegin', p1)
// 执行代码之后
// <body><p></p><div>some text</div></body>

insertAdjacentHTML, insertAdjacentText

Element.insertAdjacentHTML方法用于将一个 HTML 字符串，解析生成 DOM 结构，插入相对于当前节点的指定位置。

element.insertAdjacentHTML(position, text);

该方法接受两个参数，第一个是一个表示指定位置的字符串，第二个是待解析的 HTML 字符串。position参数的值与 insertAdjacentElement的 position 取值相同

// HTML 代码：<div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// 执行后的 HTML 代码：
// <div id="one">one</div><div id="two">two</div>

该方法只是在现有的 DOM 结构里面插入节点，这使得它的执行速度比innerHTML方法快得多。

注意，该方法不会转义 HTML 字符串，这导致它不能用来插入用户输入的内容，否则会有安全风险。

Element.insertAdjacentText方法在相对于当前节点的指定位置，插入一个文本节点，用法与Element.insertAdjacentHTML方法完全一致。

// HTML 代码：<div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentText('afterend', 'two');
// 执行后的 HTML 代码：
// <div id="one">one</div>two

修改元素

appendChild

appendChild()方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。

var p = document.createElement('p');
document.body.appendChild(p);

insertBefore

insertBefore方法用于将某个节点插入父节点内部的指定位置。insertBefore方法接受两个参数，第一个参数是所要插入的节点newNode，第二个参数是父节点parentNode内部的一个子节点referenceNode。newNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode。

var p = document.createElement('p');
document.body.insertBefore(p, document.body.firstChild);
// 上面代码中，新建一个<p>节点，插在document.body.firstChild的前面，也就是成为document.body的第一个子节点。

removeChild

removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。

var divA = document.getElementById('A');
divA.parentNode.removeChild(divA);

replaceChild

replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。replaceChild方法接受两个参数，第一个参数newChild是用来替换的新节点，第二个参数oldChild是将要替换走的子节点。返回值是替换走的那个节点oldChild

var divA = document.getElementById('divA');
var newSpan = document.createElement('span');
newSpan.textContent = 'Hello World!';
divA.parentNode.replaceChild(newSpan, divA);
// 将divA 替换成 newSpan

查询节点

获取单个节点

document.getElementById

根据元素id返回元素，返回值是Element类型，如果不存在该元素，则返回null。
使用这个接口有几点要注意：
（1）元素的Id是大小写敏感的，一定要写对元素的id
（2）HTML文档中可能存在多个id相同的元素，则返回第一个元素
（3）只从文档中进行搜索元素，如果创建了一个元素并指定id，但并没有添加到文档中，则这个元素是不会被查找到的
```
// HTML代码为
// <span id="myspan">Hello</span>
var span = document.getElementById('myspan');
span.id // "myspan"
span.tagName // "SPAN"
```

document.querySelector

Element.querySelector方法接受 CSS 选择器作为参数，返回父元素的第一个匹配的子元素。如果没有找到匹配的子元素，就返回null。

// 查找元素使用 document.querySelector() 函数
// 这个函数的参数是一个选择器(和 CSS 选择器一样)
// 选择器语法和 CSS 选择器一样, 现在只用 3 个基础选择器
// 元素选择器
var body = document.querySelector('body')
// class 选择器, 用的是 .类名
var form = document.querySelector('.login-form')
// id 选择器, 用的是   #id
var loginButton = document.querySelector('#id-button-login')
// log 出来看看

// 选择多个元素使用函数 querySelectorAll
var buttons = document.querySelectorAll('.radio-button')
// 还可以接受任何复杂的 CSS 选择器
document.body.querySelector("style[type='text/css'], style:not([type])");

// 查找到的元素还可以继续用 querySelector
var ul = document.querySelector('.ul')
ul.querySelector('li')

获取多个节点

document.getElementsByTagName
document.getElementsByClassName
document.getElementsByName
document.querySelectorAll

获取父节点

parentElement 和 parentNode

获取所有的后代节点

children属性返回一个HTMLCollection实例，成员是当前节点的所有元素子节点。

childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点，注意，除了元素节点，childNodes属性的返回值还包括文本节点和注释节点。

children 和 childNodes 最大的区别就是：children 不会把空白节点算进去。

获取兄弟节点

previousSibling，nextSibling，previousElementSibling，nextElementSibling
空白节点的坑，previousSibling，nextSibling会把空白节点算进去

操作 CSS

style

// 在单个语句中设置多个样式
elt.style.cssText = "color: blue; border: 1px solid black"; 
// 或者
elt.setAttribute("style", "color:red; border: 1px solid blue;");

// 设置特定样式，同时保持其他内联样式值不变
elt.style.color = "blue";

classList

var element = document.querySelector('.active')
if (element != null) {
     // 使用 classList 可以访问一个元素的所有 class
     // remove 可以删除一个 class
     element.classList.remove("active")
}

element.classList.add('active') // 添加 active样式
element.classList.contains('active') //判断是否包含 active 样式
element.classList.toogle('active') // 如果存在 active 样式就删除，否则就添加

获取元素的位置

获取 DOM 元素相对于文档的位置，可以直接使用 offsetTop
获取 DOM 元素相对于视口的位置，可以使用 getBoundingClientRect()
获取 SVG 元素或行内元素的 CSS 盒子（比如用来做文本高亮时），可以使用 getClientRects()；
获取绝对定位元素、伪元素的渲染后 CSS 属性，可以使用 getComputedStyle()

参考链接

获取网页的总宽高

document.body.clientWidth
document.body.clientHeight

获取视口（浏览器可见区域）的宽高

document.documentElement.clientWidth
document.documentElement.clientHeight

内容总结

以上是互联网集市为您收集整理的JavaScript 操作 DOM 总结全部内容，希望文章能够帮你解决JavaScript 操作 DOM 总结所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/779056.html

来源：【匿名】

【上一篇】雅虎JavaScript架构师：网页开发技术安全优先【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript 操作 DOM 总结】教程文章相关的互联网学习教程文章

javascript History 对象总结【代码】【图】

History 对象总结history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。语法：window.history.[属性|方法]注意：window可以省略。History 对象属性650) this.width=650;" height="37" src="/upload/getfiles/default/2022/11/5/20221105090722191.jpg" />History ...

Javascript 笔记与总结（1-4）this【代码】

js 中函数的 4 种调用方式：① 作为普通函数来调用，this 的值指向 window，准确地说，this 为 null，被解释成为 window。在 ECMAScript5 标准中，如果 this 为 null，则解释成 undefined<script> function t(){this.x = ‘hello‘; } t(); alert(window.x); </script>弹出：hello ② a.作为对象的方法来调用，this 指向方法的调用者，即该对象<script> var obj = {x:‘hello‘,y:‘world‘,t:function(){alert(this.x)}}; obj.t()...

Javascript基础知识盲点总结——数据类型和数组

一、javascript总的基本类型1.javascript中的基本类型共有五种：数字、字符串、布尔值、undefined、null其中null和undefined最大的区别在于，被赋予null的变量通常被认为是已经定义了的。2.除了以上五种基本类型外，其他的数据类型都属于对象。二、利用typeof方法查看数据类型在javascript中可以通过typeof方法来查看某个变量或值得数据类型。该方法会返回一个代表数据类型的字符串，可能返回的值包括：number,string, boolean, un...

JavaScript总结摘要【代码】

一概述 1.什么是JavaScript? 基于对象、由事件驱动的解释性脚本语言。 2.JavaScript语法特点区分大写小，这一点不同于HTML。结尾的分号可有可无。变量是弱类型的：变量在定义时统一采用var，类型在赋值时决定。 3.UI线程浏览器中都有一个用于页面展示的线程，叫做UI线程，向服务器提交以后，UI线程清空页面，等待加载服务器的反馈，如果等待时间过长，页面将出现空白。 4.this 主要用在方法中，代表当前对象，即方法的直接调...

JavaScript学习总结--创建对象（6_其他方法）【代码】

前面我们一共介绍了四种方法用来封装对象（工厂，构造模式，原型模式，构造+原型），并且重点对构造函数+原型模式做了一些改进，使之更加完美，那么除了这几种方法，还有两种方式用来封装对象，还是那句话，选择适合自己的（其实每种方法都各有利弊，在我刚开始学习时总感觉就是拆东墙补西墙）。首先来看第一种方法function Person(name,age){var o=new Object();o.name=name;o.age=age;o.sayName=function(){console.log(this.na...

javascript刷新父页面方法总结【图】

用iframe、弹出子页面刷新父页面iframeJs代码 <script language=JavaScript> parent.location.reload(); </script> 弹出子页面Js代码 <script language=JavaScript> window.opener.location.reload(); </script> 子窗口刷新父窗口Js代码 <script language=JavaScript> self.opener.location.reload(); </script> 刷新以open()方法打开的窗口Js代码 <script language=JavaScript> window.opener.loca...

Javascript操作元素属性方法总结

?1234567891011121314151617181920<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title></title></head><body> <!-- 元素属性的操作第一种：oDiv.style.display="none"; 第二种：oDiv.style["display"]="none"; 第三种：Dom方式 Dom方式操作元素的属性获取：getAttribute(名称);//...

常见的排序算法总结（JavaScript）【代码】【图】

引言　　排序算法是数据结构和算法之中的基本功，无论是在笔试还是面试，还是实际运用中都有着很基础的地位。这不正直七月，每年校招的备战期，所以想把常见的排序算法记录下来。在本篇文章中的排序算法使用 JavaScript 实现。一、冒泡排序　　冒泡排序是排序算法中最简单的一个算法，其优点是易理解，易实现。在一些对性能要求不高且数据量不大的需求中，冒泡排序是一个很好的选择。　　原理：假设排序顺序为增序，数组长度为 N...

JavaScript大杂烩13 - 总结ECMAScript 5新功能【代码】

虽说这个标准已经出来很久了，所有的主流浏览器的最新版本也都支持了这些特性，但是很多的教程中并没有包含这个部分，这一节我们专门来总结一下这个标准中的新功能。Object的新方法　　在最新的JavaScript规范(ECMAScript 5)中，Object扩展了很多不错的静态方法，下面来简单看一下：1. create/getPrototypeOf方法 - 干净的原型链　　先说简单的getPrototypeOf方法，这个方法统一了获取对象原型的方式，使用这个对象可以获取到对象的...

前端JavaScript面试题个人总结【代码】

1、JS有哪些数据类型主要数据类型：Undefined、Null、Boolean、Number、String引用数据类型：object、array、function2、JS的组成ECMAScript（核心）：JavaScript 语言基础DOM（文档对象模型）：规定了访问HTML和XML的接口BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法3、介绍JS有哪些内置对象数据封装类对象：Object、Array、Boolean、Number、String其他对象：Function、Arguments、Math、Date、RegExp、Err...

JavaScript--兼容问题总结【代码】

一.window.navigator浏览器信息1 <script> 2 console.log(window.navigator); 3// 用户浏览器的类型到底是谷歌还是火狐，ie等4 console.log(window.navigator.userAgent); 5// 判断浏览器所在的系统平台类型，window还是mac6 console.log(window.navigator.platform); 7 </script>二.查找页面元素的几种方式 1 <script>2 window.onload = function () {3// 无兼容问题放心使用 4// ...

javascript中三种输出方式总结

javascript输出是运行代码输出的表现形式，常见的有alert console.log document.write 等，javascript中三种输出方式总结1，alert()方式这种是弹出窗口的形式<script>alert("1222");</script>2，console.log调试模式谷歌浏览器，火狐浏览器控制台可以显示3，document.write 网页形式打印输出 document.write()打印输出文章来自 96net.com.cn原文：https://www.cnblogs.com/96net/p/12418302.html

javaScript-性能优化之《高性能JavaScript》读后总结【代码】【图】

JavaScript 在浏览器中的性能，可以认为是开发者所面临得最严重的可用性问题。这个问题因JavaScript的阻塞特性变得复杂，也就是说当浏览器在执行JavaScript代码时，不能同时做其他任何事情多数浏览器使用单一进程来处理用户界面（UI）的刷新和JavaScript脚本执行，所以同一时刻只能做一件事。JavaScript执行过程耗时越久，浏览器等待响应的时间就越长。每次<script>标签出现都霸道的让页面等待脚本的解析和执行。脚本位置　　将脚本...

Javascript基础知识盲点总结——函数

一、函数中的arguments对象每个函数内部都有一个arguments，它能返回函数所接受的所有参数注意：argumens接收的是实参如下是利一个利用arguments特性编写的求和函数：function sumOnSteroids(){ var I, res = 0; var number_of_params = arguments.length; for(I = 0; I < number_of_params; i++){res += arguments[i]; } return res; } 二、关于变量的作用域在javascript中，不能为变量定义特定的块级作用域，但是可以定义其所属的...

这2段有关javascript函数化模式【模块化模式】的总结，还需要好好地琢磨！！！

首页 / JAVASCRIPT / JavaScript 操作 DOM 总结

JavaScript 操作 DOM 总结

内容导读

内容图文

基本概念

节点类型

如何确定节点类型

创建元素

createElement

createTextNode

insertAdjacentElement

insertAdjacentHTML, insertAdjacentText

修改元素

appendChild

insertBefore

removeChild

replaceChild

查询节点

获取单个节点

获取多个节点

获取父节点

获取所有的后代节点

获取兄弟节点

操作 CSS

style

classList

获取元素的位置

获取网页的总宽高

获取视口（浏览器可见区域）的宽高

内容总结

内容备注

内容手机端

【JavaScript 操作 DOM 总结】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

DOM - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程