JavaScript之DOM的增删改查
JavaScript的组成：
1. ECMAScript-语法规范
2. Web APIs（浏览器提供的工具）
(1).BOM （浏览器对象模型）
(2).DOM （文档对象模型）
今天就来讲讲DOM的增删改查 （废话不多说上代码）。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<div class="app">
<div class="title">123</div>
</div>
<script>
/*
获取节点的方式
1. document.getElementById() //根据节点的id值来获取该节点
2. document.getElementByTagName() //根据节点的标签来获取该节点
3. document.getElementByName() //根据节点的属性值来获取该节点
4. document.getElementByClassName() //根据节点的类名来获取该节点
5. document.querySelectorAll() //根据元素标签获取节点 考虑兼容
*/
var app = document.getElementsByClassName("app")[0]
/*
从一个中心节点访问其所有直系或亲属节点
1，访问父节点 parentNode
2, 访问上一个兄弟节点 previousSibling
3，访问下一个兄弟节点 nextSibling
4，访问该节点的第一个属性节点 attributes[1]
5, 访问最后一个子节点 lastChild 或 childNodes[childNodes.length-1]
*/
//---------------------------------------------------------------------------
/*
获取属性
getAttribute("属性名") //返回属性值
getAttributeNode("属性名") //返回属性节点
*/
//---------------------------------------------------------------------------
/*
创建 （常用）
document.createElement() //创建元素节点
document.createTextNode() //创建文本节点
document.createAttribute() //创建属性节点
innerHTML
innerText
cloneNode() //克隆
*/
//---------------------------------------------------------------------------
/*
加入
appendChild() //追加到尾出
insertBefore() //将元素插入到某一元素的前面
用法： 父元素.insertBefore(要插入的新元素,新元素插入其前面的元素)
*/
//---------------------------------------------------------------------------
/*
删除
removeChild //删除子元素
removeAttributeNode //删除属性节点
*/
//---------------------------------------------------------------------------
/*
修改节点
删除再加入
修改样式
style.***=***
setAttribute("style","****")
修改文本
.innerHTML
.innerText
节点操作
.nodeValue
修改属性
.属性名=属性值
.setAttribute("属性名","属性值")
*/
//---------------------------------------------------------------------------
/*
其余常用的操作
style //修改css样式
setAttribute("属性名","属性值") // 设置属性
*/
</script>
</body> </html>
JavaScript之DOM的增删改查的更多相关文章
- JavaScript（JS）之Javascript对象DOM之增删改查（四）
创建节点:var ele_a = document.createElement('a');添加节点:ele_parent.appendChild(ele_img);删除节点:ele_parent.re ...
- 第 9 章 DOM 的增删改查
DOM 的增删改查 本文不会详细讲解,只是简单提及知识要点,详细可以参考<dom高级编程>. 1. document.write document.write('<h1>创建节 ...
- JS DOM节点增删改查 属性设置
一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加 删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...
- JavaScript中数组的增删改查
数组的增加 ary.push() 向数组末尾添加元素,返回的是添加后新数组的长度,原有数组改变 ary.uns ...
- JavaScript中数组的增删改查以及应用方式
数组的增加方法 1.push()方法向数组中末尾添加一个元素,原数组改变 var arr=[1,2,3,4]; var arr1=arr.push(6); console.log(arr);//打印出 ...
- DOM节点的增删改查
在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...
- js中script的上下放置区别 ， Dom的增删改创建
回顾 javascript分为三部分: 1.ECMAScript5.0 es6(阮一峰) es7 es8 es6中有类的概念 声明变量 var let(es6中语法) 内置函数 Date Math.r ...
- JavaScript HTML DOM增删改查
首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...
- HTML DOM(二)：节点的增删改查
上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这 ...
随机推荐
- Java 实现 蓝桥杯 等额本金
标题:等额本金 小明从银行贷款3万元.约定分24个月,以等额本金方式还款. 这种还款方式就是把贷款额度等分到24个月.每个月除了要还固定的本金外,还要还贷款余额在一个月 中产生的利息. 假设月利率是: ...
- Java实现最大流量问题
1 问题描述 何为最大流量问题? 给定一个有向图,并为每一个顶点设定编号为0~n,现在求取从顶点0(PS:也可以称为源点)到顶点n(PS:也可以称为汇点)后,顶点n能够接收的最大流量.图中每条边的权值 ...
- java实现杨辉三角系数
** 杨辉三角系数** (a+b)的n次幂的展开式中各项的系数很有规律,对于n=2,3,4时分别是:1 2 1, 1 3 3 1,1 4 6 4 1.这些系数构成了著名的杨辉三角形: 1 1 1 1 ...
- java实现第七届蓝桥杯阶乘位数
阶乘位数 阶乘位数 9的阶乘等于:362880 它的二进制表示为:1011000100110000000 这个数字共有19位. 请你计算,9999 的阶乘的二进制表示一共有多少位? 注意:需要提交的是 ...
- Linux ACL权限查看与设定
getfacl 文件名,可以查看文件的acl权限 setfacl [选项] 文件名,可以设定文件的acl权限,例如:setfacl -m u:boduo:rx /project/ 这时候,创建了bod ...
- Java创建ES索引实现
1.pom.xml文件 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...
- cnpm的安装(超级详细版)
1. 安装node 打开黑窗口 安装node 网上教程很多,我就不加上了 2.node -v 查看node是否已安装 3.安装淘宝镜像 npm install -g cnpm -registry ...
- git clone 时注意点
环境: 在公司访问外网需要设置代理,另外,在公司局域网内架设了一台 GIT 服务器. 在使用 git clone 时,不能设置成 git 使用代理: git config --global http. ...
- Flask 蓝图（Blueprint）使用方式解析
Flask蓝图提供了模块化管理程序路由的功能,使程序结构清晰.简单易懂.下面分析蓝图的使用方法 假如说我们要为某所学校的每个人建立一份档案,一个很自然的优化方式就是这些档案如果能分类管理,就是说假如分 ...
- 设计模式系列之工厂模式三兄弟(Factory Pattern)
说明:设计模式系列文章是读刘伟所著<设计模式的艺术之道(软件开发人员内功修炼之道)>一书的阅读笔记.个人感觉这本书讲的不错,有兴趣推荐读一读.详细内容也可以看看此书作者的博客https:/ ...