DOM的基本操作
时间:2019-08-31
本文章向大家介绍DOM的基本操作,主要包括DOM的基本操作使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.DOM属性的基本操作(增/删/改/查)
改变元素的内容(innerHTML),属性(value),样式(width,height,background)
也就是对DOM进行增删改查
DOM的属性操作,增删改查
什么是元素的属性?class就是元素的属性,写在元素内的所有东西都是元素的属性,比如link的href,img的src等
元素的属性是什么,分为两种,一种叫内置属性,一种叫非内置属性。
内置属性可以直接通过点"."进行操作
tagName //返回值是当前元素的标签名
innerHTML/innerText //返回值是当前元素的内容
id //返回值是当前元素的ID
title //获取title的标签值,这个title是从document中获取的
className //返回值是当前元素的class
href //返回值是当前的href的值
以上这些属性既可以获取,也可以设置
非内置属性需要通过一些节点的方法进行操作,注意:节点的方法,前缀一定是节点
getAttribute() //获取 元素的属性
setAttribute() //设置/修改 元素的属性,低版本的IE不兼容;接收两个参数,属性名和属性值
removeAttribute() //删除 元素的属性,低版本的IE不兼容
2.节点
根据DOM规定,HTML文档中的每个成分都是一个节点。
DOM是这样规定的:
整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点 相当于HTML文档中的所有内容都是节点,元素是节点的别称,节点包含元素,当然节点还有好多细化的种类
如何获取DOM节点:
对象.parentNode //获得父元素节点
对象.children //获得子元素节点的集合,不包含空白节点
//但IE7包含首个注释节点(前面没有元素节点),IE8包含所有注释节点
对象.childNodes //获得所有子节点的集合,包括空白节点
//IE7/8不包含空文本节点,但IE7包含首个注释节点(前面没有元素节点),IE8包含所有注释节点
如何获取属性节点:
对象.attributes //获得所有属性节点,返回一个数组
3.childNodes/过滤空白节点
通过 对象.childNodes 获得所有子节点的集合
节点属性 nodeType 返回值为数值
节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue)
元素节点 1 标签名 null
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
属性节点 2 属性名 属性值
通过遍历所有子节点,将空白节点过滤掉,得出所有的元素节点
4.高级选取firstChild/lastChild/parentNode/previousSibling/nextSibling
父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟)。
对象.childNodes //获取当前元素节点的所有子节点
对象.ownerDocument //获取该节点的文档根节点,相当与 document
对象.firstChild //获得第一个子节点。(IE7/8非空白节点,可能是注释节点)
对象.firstElementChild //获得第一个非空白的子节点。(IE7/8不支持)
对象.lastChild //获得最后一个子节点(IE7最后一个元素节点,IE8最后一个非空白节点,可能是注释节点)
对象.lastElementChild //获得最后一个非空白的子节点。(IE7/8不支持)
对象.nextSibling //获得下一个兄弟节点。(包含空白节点和注释,IE7/8包括注释节点,不包括空白节点)
对象.nextElementSibling //获得下个兄弟节点。(IE7/8不支持)
对象.previousSibling //获得上一个兄弟节点。(包含空白节点和注释。IE7/8包括注释节点,不包括空白节点)
对象.prveiousElementSibling //获得上一个兄弟节点。(IE7/8不支持)
缺点:兼容性不好
5.DOM元素的基本操作(增/删/改/查)
查询:选择器;
创建:createElement() 配合 appendChild() 将创建好的元素,插入到某个标签内的最后
删除:removeChild() 配合 parentNode
元素.remove() 直接删除当前元素
document.body.removeChild(div);
修改: outerHTML
oh1.outerHTML = "<h2>" + oh1.innerHTML +"</h2>"
创建文本节点createTextNode(“hello”)
使用方式同createElement()
原文地址:https://www.cnblogs.com/randon/p/11439477.html
- [接口测试 - 基础篇] 01 你应该了解的协议基础
- Uva - 12050 Palindrome Numbers【数论】
- [接口测试 - http.client篇] 14 源码初探及其工作机制分析
- 51Nod 1277 字符串中的最大值(KMP,裸题)
- Codeforces Round #345 (Div. 2)【A.模拟,B,暴力,C,STL,容斥原理】
- 07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
- BZOJ 1411&&Vijos 1544 : [ZJOI2009]硬币游戏【递推,快速幂】
- UVa 10341 - Solve It【经典二分,单调性求解】
- UVa 11461 - Square Numbers【数学,暴力】
- BZOJ 3097: Hash Killer I【构造题,思维题】
- Python Selenium设计模式-POM
- BZOJ 1207: [HNOI2004]打鼹鼠【妥妥的n^2爆搜,dp】
- HDU 1711 Number Sequence(KMP裸题,板子题,有坑点)
- BZOJ 2222: [Cqoi2006]猜数游戏【神奇的做法,傻逼题,猜结论】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- muduo 超时重连
- EventLoop,TcpClient,TcpServer 中的生命周期
- functional 和 bind 用法
- Flutter基础widgets教程-FittedBox篇
- muduo Dispatcher消息分发器 通过多态和模板进行向上类型转换
- Flutter基础widgets教程-FloatingActionButton篇
- VBS基础篇 - 对象(3) - FileSystemObject对象
- vbs 实现文件夹拷贝--采用堆栈不递归
- vbs - 一个简单的栈 -- 只能存储类对象
- Flutter基础widgets教程-FlutterLogo篇
- 配置压缩版mysql 5.7以上版本
- nutz 自定义sql的使用
- nutz 中 子模块 参数的使用。
- java向mysql插入数据乱码问题解决
- java向数据库中插入中文出现乱码