【收藏】JavaScript DOM操作简易速查手册

简介: 本文中简要罗列了JavaScript操作Dom的基本方法,其中包括元素查询、文档结构遍历、属性及内容操作、创建节点、插入节点及删除节点等内容。虽然JQuery更便利,但我还是喜欢用原生的API。

1 概述

1.1 前言

本文中简要罗列了JavaScript操作Dom的基本方法,其中包括元素查询、文档结构遍历、属性及内容操作、创建节点、插入节点及删除节点等内容。虽然JQuery更便利,但我还是喜欢用原生的API。

2 文档元素选取

2.1 ID选择器

通过ID选取元素是最简单和常用的选取元素的方法,ID选择器性能优于其它选择器。

var title = document.getElementById("title");

ID不存在,返回 null

查看示例程序

2.2 名称选择器

基于name属性的值选取元素区别于ID选择器。其一,name属性值 不是必须唯一,多个元素可能有同样的名称;其二,name属性只在少数HTML元素中有效,包括表单、表单元素、iframeimg 元素。

var sports = document.getElementsByName("sports");

查看示例程序

2.3 标签选择器

利用HTML元素的标签名称选取指定类型的元素。

var h1 = document.getElementsByTagName("h1");

查看示例程序

2.4 类选择器

通过HTML的 class 属性值选择元素。

var title = document.getElementsByClassName("title");

查看示例程序

2.5 CSS单元素选择器

通过CSS样式表选择器的强大语法,来选择元素。返回第一个匹配的元素。

var title = document.querySelector("#title");   // CSS ID选择
var h1 = document.querySelector("h1");     //选取第一个h1元素

查看示例程序

2.6 CSS多元素选择器

这是最强大的终极选择器

var h1s = document.querySelectorAll("h1");    //返回所有h1标签元素

查看示例程序

3 DOM遍历

3.1 节点相关

3.1.1 父节点-parentNode

返回父节点,如果 document 对象调用则返回 null

var parent = node.parentNode;

查看示例程序

3.1.2 子节点-childNodes

返回所有子节点,即NodeList对象。

var children = node.childNodes;

查看示例程序

3.1.3 首子节点-firstChild

返回第一个子节点。

var first = node.firstChild;

查看示例程序

3.1.4 尾子节点-lastChild

返回最后一个子节点。

var last = node.lastChild;

查看示例程序

3.1.5 下一兄弟节点-nextSibling

返回下一个兄弟节点。

var next = node.nextSibling;

查看示例程序

3.1.6 前一兄弟节点-previousSibling

返回前一个兄弟节点。

var previous = node.previousSibling;

查看示例程序

3.1.7 节点类型-nodeType

返回节点类型的数字表示。

  • 1代表 Element 节点
  • 3代表 Text 节点
  • 8代表 Comment 节点
  • 9代表 Document 节点
  • 11代表 DocumentFragment 节点

查看示例程序

3.1.8 节点值-nodeValue

返回 Text 节点 或 Comment 节点的值。

var value = node.nodeValue;

查看示例程序

3.1.9 节点名-nodeName

返回元素的标签名,以大写形式表示。

var name = node.nodeName;

查看示例程序

3.2 元素相关

3.2.1 子元素-children

返回所有子元素。

var children = node.children;

查看示例程序

3.2.2 首子元素-firstElementChild

元素是节点的一种。

返回所有子元素中的第一个。

var first = node.firstElementChild;

查看示例程序

3.2.3 尾子元素-lastElementChild

返回所有子元素中的最后一个。

var last= node.lastElementChild;

查看示例程序

3.2.4 下一兄弟元素-nextElementSibling

返回下一个兄弟元素。

var next = node.nextElementSibling;

查看示例程序

3.2.5 前一兄弟元素-previousElementSibling

返回前一兄弟元素。

var previous = node.previousElementSibling;

查看示例程序

3.2.6 子元素数量

返回子元素的数量。

var count = node.childElementCount;

查看示例程序

4 属性

4.1 标准属性

表示HTML文档元素的 HTMLElement 对象定义了读/写属性,它们对应于元素的HTML属性。HTMLElement 定义了通用的HTML属性,包括id、lang、dir、事件处理程序 onclick 及表单相关属性等。

form.action = "http://30ke.cn";
form.method = "post";

查看示例程序

4.2 非标准属性

4.2.1 获取属性值-getAttribute

返回非标准的HTML属性的值。

var width = img.getAttribute("width");

查看示例程序

4.2.2 属性值设置-setAttribute

设置非标准的HTML属性的值。

img.setAttribute("width","400px");

查看示例程序

4.2.3 属性存在检测-hasAttribute

返回布尔值,用来检测属性是否存在。

var result = img.hasAttribute("width");

查看示例程序

4.2.4 删除属性-removeAttribute

删除某一属性。

img.removeAttribute("width");

查看示例程序

4.3 数据集属性-dataset

在HTML5文档中,任意以 data- 为前缀的小写的属性名字都是合法的。这些 “数据集属性” 定义了一种标准的、附加额外数据的方法。

var x = img.dataset.x;

查看示例程序

4.4 元素属性-attributes

Node节点定义了 attributes 属性,针对 Element 对象,attributes 是元素所有属性的类数组对象。

var attributes = img.attributes;

索引 attributes 对象得到的值是 Attr 对象。Attr 的 name 和 value 返回该属性的名字和值。

查看示例程序

5 元素内容

5.1 元素内容-innerHTML

innerHTML 属性以字符串形式返回这个元素的内容。也可以用来替换元素当前内容。

var innerHTML = parent.innerHTML;     // 获取节点的内容
parent.innerHTML = "<h1>三十课</h1>";  //替换节点的内容

查看示例程序

5.2 元素及内容-outerHTML

outerHTML 属性以字符串形式返回这个元素及内容。也可以用来替换当前元素及内容。

var outerHTML = parent.outerHTML;     // 获取节点及内容
parent.outerHTML= "<h1>三十课</h1>";  //替换节点及其内容

查看示例程序

5.3 纯文本元素内容-textContent

查询或替换纯文本元素内容的标准方法是用Node的textContent属性来实现。在IE中,可以用 Element 的 innerText 属性来代替。

console.log(title.textContent);
title.textContent = "三十课2";

查看示例程序

6 创建节点

6.1 创建元素节点-createElement

使用 document 对象的 createElement() 方法创建新的 Element节点。

var h1 = document.createElement("h1");

查看示例程序

6.2 创建文本节点-createTextNode

创建纯文本节点。

var txt = document.createTextNode("三十课");

查看示例程序

6.3 创建文档片段-createDocumentFragment

使用文档片段通常会带来更好的性能。因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。

var fragment = document.createDocumentFragment();

查看示例程序

6.4 创建注释节点-createComment

创建注释节点不经常使用。

var comment = document.createComment("Created by 毛瑞");

查看示例程序

6.5 节点克隆-cloneNode

通过复制已存在的节点来创建新的文档节点。传参数 true 表示深克隆,false表示浅复制。

var title2 = title.cloneNode(true);

查看示例程序

7 插入节点

7.1 插入子节点-appendChild

在指定元素上插入子节点,并使其成为该节点的最后一个子节点。

parent.appendChild(h2);  

查看示例程序

7.2 节点前插入-insertBefore

  • 在父节点上调用本方法
  • 第一参数表示待插入的节点
  • 第二参数是父节点中已经存在的子节点,新节点插入到该节点的前面
parent.insertBefore(h1,h2);   // h1插入到h2之前。

查看示例程序

8 删除和替换

8.1 删除子节点-removeChild

  • 在父节点上调用
  • 参数是待删除的节点
parent.removeChild(h2);

查看示例程序

8.2 替换子节点-replaceChild

  • 在父节点上调用
  • 第一个参数是新节点
  • 第二个参数是需要替换的节点
parent.replaceChild(h2n , h2);  

查看示例程序

9 结尾

9.1 结语

本人知识水平有限,在汇编的过程中时有错误发生,如发现请不吝指正!多谢。

目录
相关文章
|
2天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
6 2
|
2天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
2天前
|
JSON 前端开发 JavaScript
在JavaScript中,异步编程是一种处理非阻塞操作(如网络请求、文件读写等)的重要技术
【6月更文挑战第12天】JavaScript中的异步编程通过Promise和async/await处理非阻塞操作。Promise管理异步操作的三种状态,防止回调地狱,支持链式调用和并行处理。async/await是ES8引入的语法糖,使异步代码更像同步代码,提高可读性。两者结合使用能更高效地处理复杂异步场景。
15 3
|
8天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
JS 监听用户页面访问&页面关闭操作并进行数据上报 第一次进入页面时触发页面访问 刷新当前页面时触发页面访问 新 tab 进入页面时触发页面访问 当前页面点击 nav 进入其他模块时,触发页面关闭&页面访问 关闭页面时触发页面关闭
12 0
|
18天前
|
JavaScript 前端开发 Java
JavaScript 快速入门手册
JavaScript 快速入门手册
|
19天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
该文主要讨论了一个网页安全项目的需求和实现,涉及用户访问和离开页面时的数据报告。需求包括首次进入、刷新、新标签页打开、导航切换以及页面关闭时的数据发送。技术要点包括使用Cookie和SessionStorage存储信息,事件监听以及navigator.sendBeacon方法进行数据发送。实现策略包括轮询检测URL变化和在unload事件中触发页面关闭报告。文章还提到了相关流程图和代码示例,总结中强调了数据上报在用户行为分析中的重要性。
|
21天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
15 2
|
30天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
22天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
25 1
|
30天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
20 2