JavaScript基础 -- 常见DOM树操作
1.创建并增加元素节点
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var parentElement = document.getElementById("ul");
var NewNode= document.createElement("li");
NewNode.innerText="AddNode";
parentElement.appendChild(NewNode);
</script>
2.判断是否存在子节点
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
- <ol id="ol"></ol>
<script>
var parentElement = document.getElementById("ul");
var parentElement2 = document.getElementById("ol");
if(parentElement.hasChildNodes()) {
alert("<ul>有子节点");
}
if(parentElement2.hasChildNodes()) {
alert("<ol>有子节点");
}
</script>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var parentElement = document.getElementById("ul");
var secondNode = parentElement.getElementsByTagName("li")[1];
varNewNode = document.createElement("li");
NewNode.innerText = "insertNode";
parentElement.insertBefore(NewNode, secondNode); //将NewNode插入在secondNode前面
</script>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var parentElement = document.getElementById("ul");
var secondNode = parentElement.getElementsByTagName("li")[1];
varNewNode = document.createElement("li");
NewNode.innerText = "replaceNode";
parentElement.replaceChild(NewNode, secondNode); //将secondNode替换成NewNode
</script>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var parentElement = document.getElementById("ul");
var secondNode = parentElement.getElementsByTagName("li")[1];
parentElement.removeChild(secondNode);
</script>
JavaScript基础 -- 常见DOM树操作的更多相关文章
- JavaScript中常见的字符串操作函数及用法
JavaScript中常见的字符串操作函数及用法 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信 ...
- JavaScript中常见的数组操作函数及用法
JavaScript中常见的数组操作函数及用法 昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下 ...
- JavaScript基础:DOM操作详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...
- DOM树操作
DOM 操作 访问与树关系(节点) 绘制 DOM 树: childNodes, attributes 从一个中心元素访问其所有的直系亲属元素 访问父节点: parentNode 访问上一个兄弟节点: ...
- javascript总结40:DOM中操作样式的两种方式
1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...
- 深圳尚学堂:JavaScript中常见的字符串操作
快到春节放假了,春节后又是一大波的找工作热潮,在前端实招聘笔试时,必不可免额会考到关于JavaScript中字符串的处理问题.考的不是你会不会,而是你能不能在不借用XX手册或者XX指南再或者百度谷歌的 ...
- Javascript学习二---DOM元素操作
Javascript 主要包括:JS的语法,DOM和BOM操作以及ECMAScript语法. 1 获取元素的方法 获取元素方法: 通过ID:document.getElementById(); 一个 ...
- javascript基础:dom
Dom: * 概念:Document Object Model 文档对象模型 * 将标记语言文档的各个组成部分,封装成对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作 * D ...
- JavaScript基础之DOM修改样式
1.获取或设置元素的内容:3个属性: 1. innerHTML: 获取或设置元素开始标签到结束标签之间的所有HTML代码原文. 何时使用:只要获得完整的html代码原文时 优化 ...
随机推荐
- 关于nested exception is org.apache.ibatis.binding.BindingException:Parameter '***' not found报错解决
几天晚上遇到的奇怪的问题 传入的参数名一直没有变 但是从mapper到xml似乎有一个找不到参数的报错,实际上只要在Mapper接口形参前加“@Param(“形参名称”)”就可以了
- 服务器中打开IIS管理器
1.选远程连接服务器,然后开始>控制面板>打开或关闭Windows功能>服务器管理器>web服务器>internet信息服务的展开下一项即可,如图:
- 显微镜下的webpack4入门
前端的构建打包工具很多,比如grunt,gulp.相信这两者大家应该是耳熟能详的,上手相对简单,而且所需手敲的代码都是比较简单的.然后webpack的出现,让这两者打包工具都有点失宠了.webpack ...
- js中事件冒泡和事件捕获
什么时候存在这种问题? 当一个行为触发了多个对象的事件时. <body> <div class="fa"> <div class=&q ...
- [Python3网络爬虫开发实战] 1.2.6-aiohttp的安装
之前介绍的Requests库是一个阻塞式HTTP请求库,当我们发出一个请求后,程序会一直等待服务器响应,直到得到响应后,程序才会进行下一步处理.其实,这个过程比较耗费资源.如果程序可以在这个等待过程中 ...
- buf.swap32()
buf.swap32() 返回:{Buffer} 将 Buffer 解释执行为一个32位的无符号整数数组并以字节顺序交换到位.如果 Buffer 的长度不是32位的倍数,则抛出一个 RangeErro ...
- Python中的列表(2)
一.从列表中删除元素 使用del 语句删除. books = ['Pride and Prejudice','Jane Eyre','The Catcher in the Rye'] print(bo ...
- 转载:Django之Form组件
Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 小试牛刀 1.创建Form类 +? 1 2 3 ...
- LeetCode(53) Maximum Subarray
题目 Find the contiguous subarray within an array (containing at least one number) which has the large ...
- 九度oj 题目1061:成绩排序
题目1061:成绩排序 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:24473 解决:6960 题目描述: 有N个学生的数据,将学生数据按成绩高低排序,如果成绩相同则按姓名字符的字母序排 ...