HTML节点操作

HTML节点的基本操作,添加节点,替换节点,删除节点,绑定事件,访问子节点,访问父节点,访问兄弟节点。

文档对象模型Document Object Model,简称DOM,是W3C组织推荐的处理可扩展标记语言XML的标准编程接口,是一种与平台和语言无关的应用程序接口API

根据W3CHTML DOM标准,HTML文档中的所有内容都是节点:整个文档是一个文档节点,每个HTML元素是元素节点,HTML元素内的文本是文本节点,每个HTML属性是属性节点,注释是注释节点。HTML DOMHTML文档视作树结构。这种结构被称为节点树: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节点操作的更多相关文章

  1. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  2. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  3. Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

    一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  4. 第6章 DOM节点操作

    一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  5. js节点操作

    在看<javascript高级程序设计>,看到节点操作这一块,觉得我只知道用appendChild(),太肤浅了,记录下学到的东西. 每个节点都有一个 parentNode 属性,该属性指 ...

  6. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  7. ligerui_ligerTree_004_对"ligerTree"节点操作

    ligerTree节点操作: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图: 代码: json.txt: [ { text ...

  8. ext 树节点操作

    ext 树节点操作 tree :树    node:节点 1.全部展开 tree.expandAll(); 2.全部收缩 tree.collapseAll(); 3.得到父节点 node.parent ...

  9. cocos2d-x 节点操作 -->J2ME

      cocos2d-x 的节点操作涉及到以下几点          1.  节点之间的关系          2.  节点的添加操作          3.  节点的删除操作          4.  ...

  10. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

随机推荐

  1. Image图片

    # View more python tutorials on my Youtube and Youku channel!!! # Youtube video tutorial: https://ww ...

  2. k8s集群搭建(三)

    Dashboard安装 Kubernetes Dashboard是k8s提供基于Web的监控和操作界面,可以通过UI来显示集群的所有工作负载,除了查看资源,还是创建.编辑.更新.删除资源. 根据Kub ...

  3. Flutter Widgets 之 ListWheelScrollView

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 在展示大量数据的时候我们第一会想到使用ListV ...

  4. IDEA Java 类注释、方法注释模板(可实现自动参数使用生成)

    JAVA 类文件注释设置 设置地方: 模板 /** * <p> * $description * </p> * * @author Tophua * @since ${DATE ...

  5. C++扬帆远航——9(小学生算数程序)

    /* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:studentjishu.cpp * 作者:常轩 * 微信公众号 ...

  6. 压力测试(六)-阿里云Linux服务器压测接口实战

    1.SpringBoot 接口打包,并用jar包方式部署 简介:用jar包方式在控制台进行启动 打包 mvn package && java -jar target/gs-spring ...

  7. 黑客必学之“网页木马webshell”

    摘要: 这节课,我们来了解一下网页的木马,首先我们了解网页木马之前,先来了解一下什么是一句话木马.小马和大马.什么是webshell首先简单说一下webshell,webshell简单来说就是黑客植入 ...

  8. 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客

    koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...

  9. Wireshark网络分析就这么简单——读书笔记

    前言 什么是wireshark? wireshark可能是世界上最好的开源网络分析器,能在多个平台上(Linux.Mac和Windows)抓取和分析网络包 wireshark分析常见的协议,可以在学习 ...

  10. 关于java性能优化细节方面的建议

    在Javva程序中,性能问题的大部分原因并不在于Java语言,而是程序本身,养成一个良好的编码习惯非常重要,能够显著地提升程序性能.下面来聊聊该方面的建议: 1.尽量在合适的场合使用单例: 所谓单例, ...