1.创建并增加元素节点

  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. </ul>
  6. <script>
  7. var parentElement = document.getElementById("ul");
  8. var NewNode= document.createElement("li");
  9. NewNode.innerText="AddNode";
  10. parentElement.appendChild(NewNode);
  11. </script>

2.判断是否存在子节点

  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. </ul>
  6. <ol id="ol"></ol>
  7. <script>
  8. var parentElement = document.getElementById("ul");
  9. var parentElement2 = document.getElementById("ol");
  10. if(parentElement.hasChildNodes()) {
  11.  alert("<ul>有子节点");
  12. }
  13. if(parentElement2.hasChildNodes()) {
  14.  alert("<ol>有子节点");
  15. }
  16. </script>
3.新建节点插入指定子节点的前面
  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. </ul>
  6. <script>
  7. var parentElement = document.getElementById("ul");
  8. var secondNode = parentElement.getElementsByTagName("li")[1];
  9. varNewNode = document.createElement("li");
  10. NewNode.innerText = "insertNode";
  11. parentElement.insertBefore(NewNode, secondNode);   //将NewNode插入在secondNode前面
  12. </script>
4.替换子节点
  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. </ul>
  6. <script>
  7. var parentElement = document.getElementById("ul");
  8. var secondNode = parentElement.getElementsByTagName("li")[1];
  9. varNewNode = document.createElement("li");
  10. NewNode.innerText = "replaceNode";
  11. parentElement.replaceChild(NewNode, secondNode);  //将secondNode替换成NewNode
  12. </script>
5.删除指定节点
  1. <ul id="ul">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. </ul>
  6. <script>
  7. var parentElement = document.getElementById("ul");
  8. var secondNode = parentElement.getElementsByTagName("li")[1];
  9. parentElement.removeChild(secondNode);
  10. </script>

JavaScript基础 -- 常见DOM树操作的更多相关文章

  1. JavaScript中常见的字符串操作函数及用法

    JavaScript中常见的字符串操作函数及用法 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信 ...

  2. JavaScript中常见的数组操作函数及用法

    JavaScript中常见的数组操作函数及用法 昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下 ...

  3. JavaScript基础:DOM操作详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...

  4. DOM树操作

    DOM 操作 访问与树关系(节点) 绘制 DOM 树: childNodes, attributes 从一个中心元素访问其所有的直系亲属元素 访问父节点: parentNode 访问上一个兄弟节点: ...

  5. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...

  6. 深圳尚学堂:JavaScript中常见的字符串操作

    快到春节放假了,春节后又是一大波的找工作热潮,在前端实招聘笔试时,必不可免额会考到关于JavaScript中字符串的处理问题.考的不是你会不会,而是你能不能在不借用XX手册或者XX指南再或者百度谷歌的 ...

  7. Javascript学习二---DOM元素操作

    Javascript 主要包括:JS的语法,DOM和BOM操作以及ECMAScript语法. 1 获取元素的方法 获取元素方法: 通过ID:document.getElementById(); 一个 ...

  8. javascript基础:dom

    Dom: * 概念:Document Object  Model    文档对象模型 * 将标记语言文档的各个组成部分,封装成对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作 *    D ...

  9. JavaScript基础之DOM修改样式

    1.获取或设置元素的内容:3个属性:   1. innerHTML: 获取或设置元素开始标签到结束标签之间的所有HTML代码原文.      何时使用:只要获得完整的html代码原文时      优化 ...

随机推荐

  1. RestTemplate接收HashMap变为LinkedHashMap,RestTemplate接收数据后转成json数据出现反斜杠

    使用postForObject方法远程调用接口,正常会返回List<HashMap>,然而实际上却返回List<LinkedHashMap>,同时将此数据进行json转换,变成 ...

  2. torch.nn.Linear()函数的理解

    import torch x = torch.randn(128, 20) # 输入的维度是(128,20)m = torch.nn.Linear(20, 30) # 20,30是指维度output ...

  3. nginx搭建静态资源服务器

    nginx配置访问前端工程 1.前端工程目录 crm-view |-- view |-- user.html 2.工程位置 C:\Users\Administrator\Desktop\CRM系统\c ...

  4. org.dom4j.DocumentException

    在使用soapui测试webservice接口的时候如果需要传入xml格式的参数 这么写是不对的,会报错org.dom4j.DocumentException: Error on line 1 of ...

  5. C51 keil 注意事项

    下载程序需要生成hex文件 仿真 蜂鸣器 音调:频率 音量:高低电平占空比 有源:上面没有加号,只需高低电平即可发声 无源:上面有加号,不仅要电平,还要, 的频率

  6. Python文件处理(txt、csv文件读取)

    打开文件 使用Python内置的方法 open()可以打开文件 file object = open(file_name [, access_mode][, buffering]) file_name ...

  7. C语言判断一个数能否被3和5整除

    #include <stdio.h> /* 判断一个数能不能同时被3和5整除 --------soulsjie 20170525----- */ void main(){ int inpu ...

  8. onos控制器通过REST API下发流表

    onos控制器REST API地址:http://192.168.43.14:8181/onos/v1/docs/ stream书写格式: { "id": "675540 ...

  9. MTK TP手势添加

    old: #include "tpd.h" #include "tpd_custom_gt9xx.h" #ifndef TPD_NO_GPIO #include ...

  10. 无法打开物理文件 "X.mdf"。操作系统错误 5:"5(拒绝访问。)"。 (Microsoft SQL Server,错误: 5120)解决

    环境 SQLServer 2008 R2 问题 附加数据库出现“无法打开物理文件 "X.mdf".操作系统错误 5:"5(拒绝访问.)". (Microsoft ...