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 ...
随机推荐
- python入门安装
一.在python官网上下载python3.4或python2.7版本,这两个版本目前比较稳定,安装第3方包相对而言没有什么问题. 二.安装成功后,在计算机->属性->高级系统设置-> ...
- 使用PyQt4写界面后台程序方法总结
使用PyQt4编写界面后台程序的方法总结 一.怎么建立多线程 界面程序如果有稍微耗时一点的任务如果不使用多线程就会界面卡死,所以大多数情况会使用到多线程.PyQt4自己有多线程的机制,可以派生多线程类 ...
- C语言初学 计算二元一次方程的问题
#include<stdio.h> #include<math.h> int main() { double a,b,c,disc,x1,x2; scanf("%lf ...
- AFNetworking使用总结
AFNetworking使用总结 关于AFNetworking使用总结 以及一些错误的解决办法. AD:WOT2015 互联网运维与开发者大会 热销抢票 AFNetworking使用总结 分享类型 ...
- GridView 中Item项居中显示
直接在GridView中设置 android:gravity="center"这个属性是不起作用的.要在你adapter中的布局文件中设 置android:layout_gravi ...
- cf B. Flag Day
http://codeforces.com/contest/357/problem/B #include <cstdio> #include <cstring> #includ ...
- MySQL常用Json函数
官方文档:JSON Functions Name Description JSON_APPEND() Append data to JSON document JSON_ARRAY() Create ...
- ios论坛
http://developer.cocoachina.com/ 讨论区:http://www.cocoachina.com/bbs/ http://bbs.9ria.com/forum-58-1.h ...
- Linux企业级项目实践之网络爬虫（18）——队列处理
所有的URL都接受管理,并在此进行流动.URL从管理模块的存储空间开始,一直到最后输出给磁盘上的URL索引,都由此部分调度.首先,给出URL调度的一般过程,如图所示.其流程的各个具体操作,后面详述.要 ...
- 关于as3实现对任何对象进行深刻复制的思考
无意中看到关于as3深度复制思考的文章,觉得不错,于是转来记录以后用到可以参考. 转载来源:http://xmchcly.iteye.com/blog/1307425,下面是转文: 通过 ByteAr ...