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 ...
随机推荐
- iPhone开发 数据持久化总结（终结篇）—5种数据持久化方法对比
iPhone开发 数据持久化总结(终结篇)—5种数据持久化方法对比 iphoneiPhoneIPhoneIPHONEIphone数据持久化 对比总结 本篇对IOS中常用的5种数据持久化方法进行简单 ...
- jquery serialize的使用
serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. <!DOCTYPE html> <html lang="en"> <he ...
- CMAKE 生成VS2008静态库工程 与 CMAKE使用，CMakeLists.txt编写总结
cmake -G"Visual Studio 9 2008 Win64" 以上命令得用cd命令切换到顶层CMakeLists.txt的当前目录,才能生效 以下是CMakeLists ...
- linux sar查看网络流量
sar -n DEV 1 10 -n { keyword [,...] | ALL } Report network statistics. IFACE Name of the network int ...
- BOT、BT、PPP形式介绍(2)
BT1.什么是BT BT投资是BOT的一种变换形式,即Build-Transfer(建设—转让),政府通过特许协议,引入国外资金或民间资金进行专属于政府的基础设施建设,基础设施建设完工后,该项 ...
- 关于ionic传值
今天,也是偶然发现有的初学者对ionic的传值还不太清除,这里我说明一下 例如你想在这个页面传递参数a.b过去,传递到"tab.wait"页面 $state.go("ta ...
- Git冲突解决方案
Git冲突解决方案 1. 在代码提交时,先更新,若有冲突.先解决冲突.若提交之后在review时才发现无法合并代码时有冲突,需要abandon此次提交的代码. 2. 解决冲突的基本做法,保存本地代 ...
- [转]Jquery中AJAX错误信息调试参考
下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...
- traceroute原理
traceroute原理 ICMP ICMP全称为Internet Control Message Protocol,即,网络控制报文协议. 当一个IP数据报发送失败时,最后一个路由器会向发送发传递一 ...
- android sqlite数据库封装 实现crud
android常用的数据保存方式有文件.sharepreferences.数据库.网络.contentprovider集中方式. 文件存储方式,经常使用在缓存整个页面数据,比如电子书内容.html数据 ...