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节点操作的更多相关文章

  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. 递归、尾递归和使用Stream延迟计算优化尾递归

    我们在学数据结构的时候必然会接触栈(Stack),而栈有一个重要的应用是在程序设计语言中实现递归.递归用途十分广泛,比如我们常见的阶乘,如下代码: 1234 public static int (in ...

  2. 从谷歌到脸书：为何巨头纷纷“钟情于”VR相机？

    VR的火爆,自然无需多言.而基于VR这一个概念,已经在多个相关行业不断衍生出新的产品.服务或内容.VR眼镜.VR头盔.VR相机.VR游戏.VR影视.VR应用--但VR产业的发展并不是齐头并进,而是出现 ...

  3. PyGame学习笔记之壹

    新建窗口 代码 '''PyGame学习笔记之壹''' import pygame # 引入 PyGame 库 pygame.init() # PyGame 库初始化 screen = pygame.d ...

  4. python爬虫之数据加密解密

    一.什么叫数据加密 数据加密是指利用加密算法和秘钥将明文转变为密文的过程. 二.数据加密的方式 1.单向加密 指只能加密数据而不能解密数据,这种加密方式主要是为了保证数据的完整性,常见的加密算法有MD ...

  5. 达拉草201771010105《面向对象程序设计（java）》第十三周学习总结

    达拉草201771010105<面向对象程序设计(java)>第十三周学习总结 第一部分:理论知识 事件处理基础: 事件源:能够产生事件的对象都可 以成为事件源,如文本框.按钮等.一个事件 ...

  6. 新冠疫情下，亚德诺(ADI）全面加速

    前言:亚德诺Analog Devices, Inc.(简称ADI),公司总部设在美国马萨诸塞州诺伍德市,设计和制造基地遍布全球.ADI公司被纳入标准普尔500指数(S&P 500 Index) ...

  7. 基于Noisy Channel Model和Viterbi算法的词性标注问题

    给定一个英文语料库,里面有很多句子,已经做好了分词,/前面的是词,后面的表示该词的词性并且每句话由句号分隔,如下图所示 对于一个句子S,句子中每个词语\(w_i\)标注了对应的词性\(z_i\).现在 ...

  8. 微信小程序中图片上传阿里云Oss

    本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...

  9. JZOJ 5246. 【NOIP2017模拟8.8A组】Trip(trip)

    5246. [NOIP2017模拟8.8A组]Trip(trip) (File IO): input:trip.in output:trip.out Time Limits: 1500 ms Memo ...

  10. SQL数据库中的增删改查总结1

    一.增:有2种方法 1.使用insert插入单行数据: 语法:insert [into]<表名> [列名] values <列值> 例:insert into Strdents ...