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 ...
随机推荐
- DEDE栏目内容调用
{dede:sql sql='Select content from dede_arctype where id=1'} [field:content/] {/dede:sql},
- HTML&CSS基础学习笔记1.10—添加链接
我们可以设置链接的目标,使我们点击后可以跳转到我们想要去的地方. <a>标签的 href 属性用于指定超链接目标的 URL. 在页面中添加的<a>标签,浏览器会用特殊效果显示, ...
- rsyslog的ommsql模块如何连接MYSQL的非标准数据库端口？
搞了我半小个时查找资料..最后,在一个官方文档中找到他... http://www.rsyslog.com/doc/ommysql.html Sample: The following sample ...
- IDA pro 的Python环境变量设置
推荐使用IDA PRO6.1+Python2.6 安装完毕Python2.6后,添加如下的环境变量: PYTHONHOME=C:\Python26PATH=%PATH%;C:\Python26LIB= ...
- sql中update，alter，modify，delete，drop的区别和使用（整理）（转）
关于update和alter: 百度知道上关于update和alter有一个很形象的总结: 一个表有很多字段,一个字段里有很多数据. 一个家有很多房间,一个房间里有很多家具. update是用来将衣柜 ...
- FILTER 哪里没展开改哪里
SELECT * FROM F_PTY_INDIV_TMP O WHERE EXISTS (SELECT 1 FROM F_PTY_INDIV F WHERE O.PTY_ID = F.PTY_ID ...
- 虚拟ip配置
虚 拟IP地址(VIP) 是一个不与特定计算机或一个计算机中的网络接口卡(NIC)相连的IP地址.数据包被发送到这个VIP地址,但是所有的数据还是经过真实的网络接口. VIPs大部分用于连接冗余:一个 ...
- Delphi 调试 通过BreakPoint
1.打个断点, 如下图 2. 在断点上,邮件,如下图 3. 弹出一个窗体 ,如下图 在 condition 中写条件就可以了. 这样就可以按你假设的条件来进行了,方便.
- ubuntu14.04 cocos2d-x-3.6 glfw编译出错解决方案
lib/libcocos2d.a(CCGLViewImpl-desktop.cpp.o): In function `cocos2d::GLViewImpl::GLViewImpl()': /home ...
- Linux下PHP安装配置MongoDB数据库连接扩展
Web服务器: IP地址:192.168.21.127 PHP安装路径:/usr/local/php 实现目的: 安装PHP的MongoDB数据库扩展,通过PHP程序连接MongoDB数据库 具体操作 ...