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 存储 ...
随机推荐
- ERROR 1129 (00000) Host ‘XXXXXX’ is blocked because of many connection errors; unblock with ‘mysqlad
1.今天早上由于公司网络带宽达到上限,导致多台web服务器连接mysql服务器超时.后来情况好转后,连接数据库服务器出现如下错误. Host '*' is blocked because of man ...
- Vimium - 让你体验Geek般的浏览体验
相信很多电脑高手们都会寻找一一些快捷高效的操作方式,如经常利用键盘的快速操作,让你脱离鼠标,可以让你不用花太多精力地去移动细小的指针进行操作,使得工作的效率提高许多. 不过,实际上很多时候我们还是不得 ...
- 【Java】Map总结和源码注释
前言 Map为一个Java中一个重要的数据结构,主要表示<key, value>的映射关系对.本文包括了相关Map数据结构的总结和源码的阅读注释. HashMap 初始化,可以选择第二个初 ...
- swoole(2)swoole进程结构
一:进程基本概念 系统中正在运行的一个程序,程序一旦运行就是进程 一个进程可以拥有多个线程 核心内容分为两部分:内存(进程创建时从系统分配的,它所创建的变量都会存储在这一块内存中).上下文环境 二:s ...
- 关于图数据库HugeGraph的百万，千万，亿量级测试
1.Hugegraph测试硬件 1.1.本机硬件 本机测试hugeGraph版本:0.10.4 后置存储数据库:rocksdb,1TB的普通硬盘 1.2.测试服务器硬件 测试服务器hugegraph版 ...
- py基础之模块与包
'''模块:当代码越来越多时,将所有代码放入一个文件中便会无法维护,所以放到多个文件中去,这样每一个py文件就是一个模块 包:模块越来越多时容易重名,便将模块放入不同的包中,每个包中必须有一个__in ...
- Chrome 63 - What"s New in DevTools（中文字幕）
大家好,这是代码之声(codefm)第一期,今天给大家带来的是 What's New In DevTools (Chrome 63). Chrome 一般会每隔 6 周发布一次主版本.目前 Chro ...
- js移动端滑倒顶部加载历史消息解决方案!
最近做了一个语音直播聊天的项目,有一个功能是当没有直播时,进入房间可以查看历史消息,滑动到顶部加载之前的历史消息,我用jquery scroll事件,来判断是否滚动到顶部,问题来了: 首先触发请求事件 ...
- 牛客网剑指offer第34题——找到第一个只出现一次的字符
题目如下: 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写). 先上代码: class ...
- js中的预编译
预编译 js执行顺序: 词法/语法分析 预编译 解释执行 js中存在预编译 function demo() { console.log('I am demo'); } demo(); //I am d ...