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实现 LeetCode 62 不同路径
62. 不同路径 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为"Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中 ...
- Java实现蓝桥杯 算法训练 大等于n的最小完全平方数
试题 算法训练 大等于n的最小完全平方数 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 输出大等于n的最小的完全平方数. 若一个数能表示成某个自然数的平方的形式,则称这个数为完全平 ...
- Java实现分割矩形
给定平面内平行于坐标轴的一个矩形,从矩形内选 择一些点,从这些点向右和向上各射出一条射线, 请问:这些射线将矩形分成了多少份. 数据格式: 输入的第一行包含两个整数x, y,表示矩形是由(0, 0), ...
- Python大神编程常用4大工具,你用过几个?
摘要:Python是一种跨平台的编程语言,能够在所有主要的操作系统上,运行你编写的任何Python程序.今天介绍几款常见的工具:Python自带的解释器.文本编辑器(Geany.Sublime Tex ...
- 关于宝塔面板ftp+sublime
如果sublime通过ftp上传文件传不上去,我的问题在于应该把sftp-config.json中"remote_path": "/",设置成这样.一下午.哎呀 ...
- pip 安装使用国内镜像
pip国内的一些镜像 阿里云 https://mirrors.aliyun.com/pypi/simple/中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple ...
- shutil模块的使用
shutil模块 高级的文件,文件夹,压缩包处理模块 shutil.copyfileobj(fsrc,fdst,length) 将文件内容拷贝到另外一个文件中,可以部分.fdst目标length长度( ...
- Flume-0.9.4和Hbase-0.96整合
这几天由于项目的需要,需要将Flume收集到的日志插入到Hbase中,有人说,这不很简单么?Flume里面自带了Hbase sink,可以直接调用啊,还用说么?是的,我在本博客的<Flume-1 ...
- Tensorflow从0到1（3）之实战传统机器算法
计算图中的操作 import numpy as np import tensorflow as tf sess = tf.Session() x_vals = np.array([1., 3., 5. ...
- Anaconda 安装 以及conda使用
下载 https://www.anaconda.com/distribution/#macos 管理 conda 版本查看 conda --version conda 版本更新 conda updat ...