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 ...
随机推荐
- Flask学习记录之MarkDown编辑文本
为了让网页支持markdown编辑文本,使用如下了4个库 PageDown : 在前端提供一个可以实时将markdown内容转换成html文本进行效果预览的编辑器 Flask-PageDown: 这个 ...
- Java学习笔记--“==”与"equals"
java中的数据类型,可分为两类: 1. 基本数据类型,也称原始数据类型.byte,short,char,int,long,float,double,boolean 他们之间的比较,应用双等号(==) ...
- Idea使用记录--添加Problems&&解决Autowired报错could not autowire
今天在使用Idea的时候,发现Idea在整个每次找到错误代码非常不方便(Idea如果类中有错误,没有打开过类并不会提示,比如构建工程后缺少jar包问题).我想快速看到工程哪里出问题类似于eclipse ...
- jquery easyui根据需求二次开发记录
1.tree需要显示多个图标 实际需求:设备树上节点需搁三个图片,分别标识运行状态.告警状态.设备类型 解决方法:给tree的iconCls传入一个数组,分别是各状态下的class(css),然后要改 ...
- CCI_chapter 8 Recurision
8.1 水题 8.2 Imagine a robot sitting on the upper left hand corner of an NxN grid The robot can only m ...
- 单线程Singleton模式的几个要点
1.Singleton模式中的实例构造器可以设置为protected以允许子类派生.2.Singleton模式一般不要支持ICIoneable接口,因为这可能会导致多个对象实例,与Singleton模 ...
- 2015第24周一Spring事务
1. Spring事务管理简介 (1)Spring为多种不同类型的事务管理机制提供统一编程模型,这些事务管理模型包括JTA.JDBC.Hibernate.JPA和JDO. (2)Spring支持声明式 ...
- Underscore.js(1.7.0) 中文文档 Underscore.js 入门
原文地址:http://www.css88.com/doc/underscore/ Underscore.js 入门 http://www.tuicool.com/articles/jQ3IfeR
- Cannot find class in classpath 报错
删除项目文件夹下的target文件夹里面内容,重新运行测试代码,报错 org.testng.TestNGException: Cannot find class in classpath: com.f ...
- vbox下centos安装增加功能失败
一般都是:unable to find the sources of your current Linux kernel. 先尝试这个吧:yum install kernel kernel-heade ...