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代码原文时 优化 ...
随机推荐
- RestTemplate接收HashMap变为LinkedHashMap,RestTemplate接收数据后转成json数据出现反斜杠
使用postForObject方法远程调用接口,正常会返回List<HashMap>,然而实际上却返回List<LinkedHashMap>,同时将此数据进行json转换,变成 ...
- torch.nn.Linear()函数的理解
import torch x = torch.randn(128, 20) # 输入的维度是(128,20)m = torch.nn.Linear(20, 30) # 20,30是指维度output ...
- nginx搭建静态资源服务器
nginx配置访问前端工程 1.前端工程目录 crm-view |-- view |-- user.html 2.工程位置 C:\Users\Administrator\Desktop\CRM系统\c ...
- org.dom4j.DocumentException
在使用soapui测试webservice接口的时候如果需要传入xml格式的参数 这么写是不对的,会报错org.dom4j.DocumentException: Error on line 1 of ...
- C51 keil 注意事项
下载程序需要生成hex文件 仿真 蜂鸣器 音调:频率 音量:高低电平占空比 有源:上面没有加号,只需高低电平即可发声 无源:上面有加号,不仅要电平,还要, 的频率
- Python文件处理(txt、csv文件读取)
打开文件 使用Python内置的方法 open()可以打开文件 file object = open(file_name [, access_mode][, buffering]) file_name ...
- C语言判断一个数能否被3和5整除
#include <stdio.h> /* 判断一个数能不能同时被3和5整除 --------soulsjie 20170525----- */ void main(){ int inpu ...
- onos控制器通过REST API下发流表
onos控制器REST API地址:http://192.168.43.14:8181/onos/v1/docs/ stream书写格式: { "id": "675540 ...
- MTK TP手势添加
old: #include "tpd.h" #include "tpd_custom_gt9xx.h" #ifndef TPD_NO_GPIO #include ...
- 无法打开物理文件 "X.mdf"。操作系统错误 5:"5(拒绝访问。)"。 (Microsoft SQL Server,错误: 5120)解决
环境 SQLServer 2008 R2 问题 附加数据库出现“无法打开物理文件 "X.mdf".操作系统错误 5:"5(拒绝访问.)". (Microsoft ...