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. 关于nested exception is org.apache.ibatis.binding.BindingException:Parameter '***' not found报错解决

    几天晚上遇到的奇怪的问题  传入的参数名一直没有变   但是从mapper到xml似乎有一个找不到参数的报错,实际上只要在Mapper接口形参前加“@Param(“形参名称”)”就可以了

  2. 服务器中打开IIS管理器

    1.选远程连接服务器,然后开始>控制面板>打开或关闭Windows功能>服务器管理器>web服务器>internet信息服务的展开下一项即可,如图:

  3. 显微镜下的webpack4入门

    前端的构建打包工具很多,比如grunt,gulp.相信这两者大家应该是耳熟能详的,上手相对简单,而且所需手敲的代码都是比较简单的.然后webpack的出现,让这两者打包工具都有点失宠了.webpack ...

  4. js中事件冒泡和事件捕获

    什么时候存在这种问题? 当一个行为触发了多个对象的事件时.   <body>   <div class="fa">     <div class=&q ...

  5. [Python3网络爬虫开发实战] 1.2.6-aiohttp的安装

    之前介绍的Requests库是一个阻塞式HTTP请求库,当我们发出一个请求后,程序会一直等待服务器响应,直到得到响应后,程序才会进行下一步处理.其实,这个过程比较耗费资源.如果程序可以在这个等待过程中 ...

  6. buf.swap32()

    buf.swap32() 返回:{Buffer} 将 Buffer 解释执行为一个32位的无符号整数数组并以字节顺序交换到位.如果 Buffer 的长度不是32位的倍数,则抛出一个 RangeErro ...

  7. Python中的列表(2)

    一.从列表中删除元素 使用del 语句删除. books = ['Pride and Prejudice','Jane Eyre','The Catcher in the Rye'] print(bo ...

  8. 转载:Django之Form组件

    Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 小试牛刀 1.创建Form类 +? 1 2 3 ...

  9. LeetCode(53) Maximum Subarray

    题目 Find the contiguous subarray within an array (containing at least one number) which has the large ...

  10. 九度oj 题目1061:成绩排序

    题目1061:成绩排序 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:24473 解决:6960 题目描述: 有N个学生的数据,将学生数据按成绩高低排序,如果成绩相同则按姓名字符的字母序排 ...