整理JavaScript对DOM中各种类型的元素的常用操作_基础知识
节点类型
nodeType
以下是一些重要的nodeType的取值：
1： 元素element
2： 属性attr
3： 文本text
8： 注释comments
9： 文档document
nodeName,nodeValue
节点关系
childNodes: 每个节点都有一个childNodes属性，其中保存着一个NodeList对象
firstChild: 等同于childNodes[0]
lastChild: 等同于childNodes.length-1
同时通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。
操作节点
appendChild()
appendChild()方法用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。
insertBefore()
insertBefore()这个方法接受两个参数：要插入的节点和作为参照的节点。
// 插入后成为最后一个子节点 returnedNode = someNode.insertBefore(newNode,null); // 插入后成为第一个节点 returnedNode = someNode.insertBefore(newNode,someNode.firstChild); // 插入到最后一个子节点前面 returnedNode = someNode.insertBefore(newNode,someNode.lastChild);
repaceChild()
repaceChild()接受两个参数，要插入的节点和要替换的节点
var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
removeChild()
只移除而非替换节点。
var formerFirstChild = someNode.removeChild(someNode.firstChild);
cloneNode()
item 1
item 2
item 3
var deepList = myList.cloneNode(true); console.log(deepList.length); // 3 var shallowList = myList.cloneNode(false); console.log(shallowList.childNodes.length); //0
Document类型
Document节点具有下列特征：
- nodeType的值为9；
- nodeName的值为#document;
- nodeValue的值为null;
- parentNode的值为null;
- ownerDocument的值为null;
文档的子节点
var html = document.documentElement; // 取得对<html>的引用 console.log(html === document.childNodes[0]); // true console.log(html === document.firstChild); // true
文档信息
// 取得文档的标题 var originalTitle = document.title; // 设置文档标题 document.title = "New page title"; // 取得完整的url var url = document.URL; // 取得域名 var domain = document.domain; // 取得来源页面的url var referrer = document.referrer; //假设页面来自p2p.wrox.com域 document.domain = "wrox.com"; // 成功 document.domain = "nczonline.net"; // 失败
在IE7中调用document.getElementById("myElement");结果会返回元素，如下所示；
最好的办法是不让表单字段的name特性与其他元素的ID相同。
<input type="text" name="myElement" value="text field"> <div id="myElement">a div</div>
特殊集合
- document.anchors,包含文档中所有带name特性的a元素;
- document.forms, 包含文档中所有form元素，与document.getElementsByTagName("form")得到的结果相同;
- document.images,包含文档中所有的img元素，与document.getElementsByTagName("img")得到的结果相同;
- document.links，包含文档中所有带href特性的a元素;
文档写入
<html>
<head>
<title>document.write() Example 3</title>
</head>
<body>
<script type="text/javascript">
document.write("<script type=\"text/javascript\" src=\"file.js\">") + "<\/script>");
</script>
</body>
</html>
字符串不会被当作外部script标签的关闭标签，因而页面中也就不会出现多余的内容了。
Element类型
Element节点具有以下特征：
- nodeType的值为1;
- nodeName的值为元素的标签名;
- nodeValue的值为null;
- parentNode可能是Document或Element;
要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；
<div id="myDiv"></div>
var div = document.getElementById("myDiv");
console.log(div.tagName); // DIV
console.log(div.nodeName); // DIV
if (element.tagName=="div") { // 不能这样比较，很容易出错
}
if (element.tagName.toLowerCase =="div") { // 这样最好（适用于任何文档）
}
取得特性
操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()、removeAttribute()；
注意，传递给getAttribute()的特性名与实际的特性名相同。印象要想得到class的特性值，应该传入"class"而不是"className"。
var div = document.getElementById("myDiv");
console.log(div.getAttribute("class")); // bd
创建元素
使用document.createElement()方法可以创建新元素。
元素的子节点
在执行某项操作以前，通常都要先检查一下nodeType属性，如下面的例子所示:
for (var i=0; len = element.childNodes.length; i<len; i++){
if (element.childNodes[i].nodeType ==1) {
// 执行某些操作
}
}
Text类型
Text节点具有以下特征：
- nodeType的值为3；
- nodeName的值为"#text";
- nodeValue的值为节点所包含的文本；
- parentNode是一个Element；
创建文本节点
可以使用document.createTextNode()创建新文本节点。
规范化文本节点
normalize()
分割文本节点
splitText()
Comment类型
comment节点具有下列特征：
- nodeType的值为8;
- nodeName的值为"#comment";
- nodeValue的值是注释的内容；
- parentNode可能是Document或Element；
- 不支持（没有）子几点；
DOM操作技术
操作表格
// 创建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
// 创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
// 创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1"));
// 创建第二行
tbody.insertRow(01);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));
document.body.appendChild(table);
选择符API
querySelector()方法
// 取得body元素
var tbody = document.querySelector('body');
// 取得ID为"myDIV"的元素
var myDIV = document.querySelector("#myDiv");
// 取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");
// 取得类为"button"的第一个图像元素
var img = document.body.querySelector("img.button");
querySelectorAll()方法
// 取得某<div>中的所有<em>元素(类似于getElementsByTagName("em"))
var ems = document.getElementById("myDiv").querySelectorAll("em");
// 取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");
// 取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");
HTML5
与类相关的扩充
getElementsByClassName()方法：
该方法可以通过document对象及所有HTML元素调用该方法。
// 取得所有类中包含"username"和"current"的元素。类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");
// 取得ID为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");
焦点管理
HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); // true
默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，docuemnt.activeElement的值为null。
另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
var button = document.getElementById("myButton");
botton.focus();
alert(document.hasFocus()); // true
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何使用WebSocket和JavaScript实现在线语音识别系统
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系
WebSocket与JavaScript：实现实时监控系统的关键技术
Dec 17, 2023 pm 05:30 PM
WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技
如何利用JavaScript和WebSocket实现实时在线点餐系统
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单
如何使用WebSocket和JavaScript实现在线预约系统
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工
JavaScript和WebSocket：打造高效的实时天气预报系统
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We
javascript中如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数：要插入的新节点和参考节点（即新节点将要被插入的位置的节点）。
简易JavaScript教程：获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest
如何在JavaScript中获取HTTP状态码的简单方法
Jan 05, 2024 pm 01:37 PM
JavaScript中的HTTP状态码获取方法简介：在进行前端开发中，我们常常需要处理与后端接口的交互，而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法，并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时，服务
