HTML节点操作
HTML节点操作
HTML节点的基本操作，添加节点，替换节点，删除节点，绑定事件，访问子节点，访问父节点，访问兄弟节点。
文档对象模型Document Object Model，简称DOM，是W3C组织推荐的处理可扩展标记语言XML的标准编程接口，是一种与平台和语言无关的应用程序接口API。
根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，每个HTML属性是属性节点，注释是注释节点。HTML DOM将HTML文档视作树结构。这种结构被称为节点树：HTML DOM Tree实例。
添加节点
<div id="t1"></div>
<script type="text/javascript">
var d1 = document.createElement("div"); // 创建一个节点
d1.style.color = "blue"; // 设置一下颜色
d1.setAttribute("id","d1"); // 设置一个属性
d1.innerText="innerText"; // innerText会一次性替换所有内容
var tn1=document.createTextNode(" CreateTextNode"); // createTextNode可以做动态添加
d1.appendChild(tn1); // 追加文本节点
var node = document.getElementById("t1").appendChild(d1); // 将d1节点追加到t1节点后
var b1 = document.createElement("div");
b1.innerText="添加到d1前";
document.getElementById("t1").insertBefore(b1,document.getElementById("d1")); // 将b1节点添加到t1节点内的d1节点前
</script>
替换节点
<div id="t2">
<div>被替换的节点</div>
</div>
<script type="text/javascript">
var d2 = document.createElement("div");
d2.style.color = "green";
d2.innerText="被我替换了";
document.getElementById("t2").replaceChild(d2,document.querySelector("#t2 > div:first-child")); // 第一个参数是要替换的节点，第二个参数是被替换的节点
</script>
删除节点
<div id="t3">
<div>下边的兄弟被删除了</div>
<div>我要被删除了</div>
</div>
<script type="text/javascript">
document.getElementById("t3").removeChild(document.querySelector("#t3 > div:nth-child(2)"));
</script>
绑定事件
<div id="t4" style="color: red;">点我</div>
<script type="text/javascript">
document.getElementById("t4").addEventListener('click',(e) => {
alert("点击事件");
})
</script
<!-- 事件流模型见 https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/JS%E4%BA%8B%E4%BB%B6%E6%B5%81%E6%A8%A1%E5%9E%8B.md#dom0%E7%BA%A7%E6%A8%A1%E5%9E%8B -->
访问子节点
<div id="t5" style="color: grey;">
<div>1</div>
<div>2</div>
</div>
<script type="text/javascript">
console.log(document.getElementById("t5").childNodes); // 获取所有子节点 // 注意每个换行也会有一个#text文本节点
console.log(document.getElementById("t5").childElementCount); // 获取子节点数量
console.log( document.getElementById("t5").firstChild); // 获取第一个子节点，注意也会匹配#text
console.log(document.getElementById("t5").firstElementChild); // 获取第一个子节点
console.log(document.getElementById("t5").lastChild); // 获取最后一个子节点，注意也会匹配#text
console.log(document.getElementById("t5").lastElementChild); // 获取最后一个子节点
</script>
访问父节点
<div style="color: yellow;">
<div id="t6">1</div>
</div>
<script type="text/javascript">
console.log(document.getElementById("t6").parentNode);
</script>
访问兄弟节点
<div style="color: brown;"><div>1</div><div id="t7">2</div><div>3</div></div>
<script type="text/javascript">
console.log(document.getElementById("t7").previousSibling); // 注意也会匹配#text
console.log(document.getElementById("t7").nextSibling); // 注意也会匹配#text
</script>
代码示例
<!DOCTYPE html>
<html>
<head>
<title>HTML节点操作</title>
<meta charset="utf-8">
</head>
<body>
<div id="t1"></div>
<script type="text/javascript">
var d1 = document.createElement("div"); // 创建一个节点
d1.style.color = "blue"; // 设置一下颜色
d1.setAttribute("id","d1"); // 设置一个属性
d1.innerText="innerText"; // innerText会一次性替换所有内容
var tn1=document.createTextNode(" CreateTextNode"); // createTextNode可以做动态添加
d1.appendChild(tn1); // 追加文本节点
var node = document.getElementById("t1").appendChild(d1); // 将d1节点追加到t1节点后
var b1 = document.createElement("div");
b1.innerText="添加到d1前";
document.getElementById("t1").insertBefore(b1,document.getElementById("d1")); // 将b1节点添加到t1节点内的d1节点前
</script>
<div id="t2">
<div>被替换的节点</div>
</div>
<script type="text/javascript">
var d2 = document.createElement("div");
d2.style.color = "green";
d2.innerText="被我替换了";
document.getElementById("t2").replaceChild(d2,document.querySelector("#t2 > div:first-child")); // 第一个参数是要替换的节点，第二个参数是被替换的节点
</script>
<div id="t3">
<div>下边的兄弟被删除了</div>
<div>我要被删除了</div>
</div>
<script type="text/javascript">
document.getElementById("t3").removeChild(document.querySelector("#t3 > div:nth-child(2)"));
</script>
<div id="t4" style="color: red;">点我</div>
<script type="text/javascript">
document.getElementById("t4").addEventListener('click',(e) => {
alert("点击事件");
})
</script>
<!-- 事件流模型见 https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/JS%E4%BA%8B%E4%BB%B6%E6%B5%81%E6%A8%A1%E5%9E%8B.md#dom0%E7%BA%A7%E6%A8%A1%E5%9E%8B -->
<div id="t5" style="color: grey;">
<div>1</div>
<div>2</div>
</div>
<script type="text/javascript">
console.log(document.getElementById("t5").childNodes); // 获取所有子节点 // 注意每个换行也会有一个#text文本节点
console.log(document.getElementById("t5").childElementCount); // 获取子节点数量
console.log( document.getElementById("t5").firstChild); // 获取第一个子节点，注意也会匹配#text
console.log(document.getElementById("t5").firstElementChild); // 获取第一个子节点
console.log(document.getElementById("t5").lastChild); // 获取最后一个子节点，注意也会匹配#text
console.log(document.getElementById("t5").lastElementChild); // 获取最后一个子节点
</script>
<div style="color: yellow;">
<div id="t6">1</div>
</div>
<script type="text/javascript">
console.log(document.getElementById("t6").parentNode);
</script>
<div style="color: brown;"><div>1</div><div id="t7">2</div><div>3</div></div>
<script type="text/javascript">
console.log(document.getElementById("t7").previousSibling); // 注意也会匹配#text
console.log(document.getElementById("t7").nextSibling); // 注意也会匹配#text
</script>
</body>
</html>
HTML节点操作的更多相关文章
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- 第6章 DOM节点操作
一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...
- js节点操作
在看<javascript高级程序设计>,看到节点操作这一块,觉得我只知道用appendChild(),太肤浅了,记录下学到的东西. 每个节点都有一个 parentNode 属性,该属性指 ...
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
- ligerui_ligerTree_004_对"ligerTree"节点操作
ligerTree节点操作: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图: 代码: json.txt: [ { text ...
- ext 树节点操作
ext 树节点操作 tree :树 node:节点 1.全部展开 tree.expandAll(); 2.全部收缩 tree.collapseAll(); 3.得到父节点 node.parent ...
- cocos2d-x 节点操作 -->J2ME
cocos2d-x 的节点操作涉及到以下几点 1. 节点之间的关系 2. 节点的添加操作 3. 节点的删除操作 4. ...
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
随机推荐
- MyBatis学习总结之一对多映射
1.首先创建2张表:students 和grades create table grades( gid ) primary key, gname varchar() ); create table s ...
- ZOJ 2532 网络流最小割
求最小割的问题. 题意:已知网络中有n个源点,m的中转站(也就是节点),一个汇点(编号为0).给出网络,求一些边(增大这个边就可以增大汇点流量的边). 思路:一开始代码只找了有流=0就加入输出数组的情 ...
- kibana增加验证
Kibana从5.5开始不提供认证功能,想用官方的认证X-Pack收费 ... 自己动手吧,用nginx的代理加apache生成的密码认证文件.环境:ubuntu16.04 安装nginxapt-ge ...
- Hexo之旅(四)：文章编写技巧
hexo 编写文章可以使用以下命令创建hexo new "文件名" #创建的文章会在_pots目录下文章的后缀名是以md命名的文件格式,遵循markdown语法,所以编写文章可以使 ...
- React使用笔记2--创建登录组件
文章目录 最近在学习使用React作为前端的框架,<React使用笔记>系列用于记录过程中的一些使用和解决方法.本文记录搭建登录页面的过程. 根据产品规划划分模块 主要页面逻辑 在这里,本 ...
- java基础-略知一二
Collection Set HashSet LinkedHashSet SortedSet TreeSet List ArrayList 构造方法 LinkedList 构造方法 Map 特性 方法 ...
- AndroidStudio自动导入包
IntelliJ IDEA可以自动优化导入包,但是有多个同名的类位于不同的包时,需要自己手动使用Alt + Enter进行导入. Settings→Editor→General→Auto Import ...
- C++扬帆远航——9（小学生算数程序）
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:studentjishu.cpp * 作者:常轩 * 微信公众号 ...
- JSR310-新日期APIJSR310新日期API(完结篇)-生产实战
前提 前面通过五篇文章基本介绍完JSR-310常用的日期时间API以及一些工具类,这篇博文主要说说笔者在生产实战中使用JSR-310日期时间API的一些经验. 系列文章: JSR310新日期API(一 ...
- 如何在windows server上安装 Windows评估和部署工具包
此文是<.NET内存宝典>一书的售后服务系列文章之一. 在<.NET内存宝典>一书(目前我还在翻译本书,预计年底出版)的第3章 “内存测量”里的“Windows性能工具包”一节 ...