javascript操作DOM的方法与属性
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构。
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.baidu.com"。
节点属性:
| 属性 | 说明 |
|---|---|
| nodeName | 节点的名称 |
| nodeType | 节点的类型 |
| nodeValue | 节点的当前值 |
遍历节点树:
| 属性 | 说明 |
|---|---|
| childNodes | 所有子节点 |
| firstChild | 第一个子节点 |
| lastChild | 最后一个子节点 |
| parentNode | 父节点 |
| nextSibling | 下一个节点（同一层级中） |
| previousSibling | 上一个节点（同一层级中） |
DOM操作:
| 属性 | 说明 |
|---|---|
| creteElement(element) | 创建一个新的元素节点 |
| createTextNode() | 创建一个新的文本节点 |
| appendChild(newnode) | 在元素最后添加一个新的子节点 |
| insertBefore(newnode,node) | 在已有子节点之前插入新的子节点 |
| removeChild(node) | 从元素子节点中删除给定的节点 |
| replaceChild(newnode,oldnew) | 替换指定的子节点 |
注意:前两个是document的方法。
javascript操作DOM的方法与属性的更多相关文章
- JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
- Python javascript操作DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- 你所不了解的javascript操作DOM的细节知识点(一)
你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...
- JavaScript 操作DOM对象
1)JavaScript 操作DOM對象 1.DOM:是Document Object Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
- 使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象
一.DOM操作分类 使用JavaScript操作DOM时通常分为三类:DOM Core.HTMl--DOM和CSS-DOM 二.访问节点 节点属性 三.节点信息 四.操作节点的属性 语法: ge ...
随机推荐
- Hadoop学习历程（三、第一个程序）
根据之前的操作,我们已经可以正常的启动Hadoop了,关于真正的集群我会在之后进行说明.现在我们来看一下第一个程序吧 1. 在eclipse上建立一个java项目 2. 将 /usr/hadoop/s ...
- GCD 单例
+ (ThemeManager *)sharedInstance { static dispatch_once_t once; //只执行一次 static ThemeManager ...
- 如何用js检测手机是否安装某个app
问题描述 如果本地安装了app那么直接打开,否则苹果要跳转到app-store,安卓则要跳到对应的市场 解决方案 一 //html代码中 的 a 标签,以微信为例,默认的是调用weixin schem ...
- scala 入门（2）--数组相关操作
scala 无论从数组的定义还是操作方面来说都跟java非常相似,但又有其独特的强大之处… 1. 定长数组 对于长度不变的数组,可以用scala中的Array. //scala 里使用new实例化对象 ...
- WCF-基本知识
WCF-基本知识 (1)WCF服务元数据交换方式介绍: WCF服务有两种方案可以发布自己的元数据.一种是基于HTTP-GET协议提供元数据:另一种则为MEX终结点元数据交换方式,和WCF服务一样使用一 ...
- 解决Qt中文乱码以及汉字编码的问题(UTF-8/GBK)——ubuntu环境设置默认是utf-8，文件编码可使用Encodersoft批量转换
一.Qt环境设置 文件从window上传到Ubuntu后会显示乱码,原因是因为ubuntu环境设置默认是utf-8,Windows默认都是GBK.Windows环境下,Qt Creator,菜单-&g ...
- mv,Directory not empty不能目录覆盖
一.mv /test1/* /test2/test1rm -rf /test1 二. You can however use rsync with the --remove-source-files ...
- html5 750 REM JS换算方法
在安卓手机低版本浏览器,如果进页面快速执行的话会出现计算宽度不正确的情况,解决方法是放在onload方法里面执行,但这种解决方式在一些高版本浏览器中会出现页面闪动,所以使用判断浏览器版本的方式来解决, ...
- gzcompress, gzencode, gzdeflate三个压缩函数的对比
PHP的自带的函数中,有三个压缩相关的函数:gzcompress.gzencode.gzdeflate,下面我们通过一段程序,来比较一下这三个函数的压缩比.代码:$string = "8ae ...
- 读书笔记-HBase in Action-第二部分Advanced concepts-(2)Coprocessor
Coprocessor是HBase 0.92.0引入的特性.使用Coprocessor.能够将一些计算逻辑下推到HBase节点,HBase由一个单纯的存储系统升级为分布式数据处理平台. Coproce ...