HTML DOM随笔
编程接口
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
方法是您能够执行的动作（比如添加或修改元素）。
属性是您能够获取或设置的值（比如节点的名称或内容）。
getElementById() 方法返回带有指定 ID 的元素.
HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
一些 DOM 对象方法中的常用方法：
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
属性是节点（HTML 元素）的值，您能够获取或设置。
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>。
nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
注释：nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
访问 HTML 元素（节点）
访问 HTML 元素等同于访问节点
以不同的方式来访问 HTML 元素：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
修改 HTML 元素
修改 HTML DOM 意味着许多不同的方面：
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）
使用事件
HTML DOM 允许您在事件发生时执行代码。
当 HTML 元素”有事情发生“时，浏览器就会生成事件：
- 在元素上点击
- 加载页面
- 改变输入字段
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
HTML DOM随笔的更多相关文章
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇
<高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- 《DOM启蒙》 随笔
使用 Javascript 字符串创建并向 DOM 中添加元素与文本节点 innerHTML.outerHTML.textContent 及 insertAdjacentHTML() 属性和方法提供了 ...
- 随笔 JS 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里
JS /* * 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里 * @id 要插入到DOM元素的ID * * 输入值为图片URL 字符串 * */ function addImages(i ...
- Javascript 获取dom的宽度 随笔一
javascript 中 offsetWidth 获得的并不是 真实的宽度 不等于 style.width ;offetWidth 实际上获得的是物体的盒模型尺寸. 包括 border padding ...
- dom解析xml随笔
1.dom解析jar包准备: dom解析需用到dom4j的jar包,比如我在项目中用到的的是dom4j-1.6.1jar,因为项目用的是MAVEN,所以可直接到maven中央库去搜索相关pom坐标配置 ...
- 随笔一个dom节点绑定事件
以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的 ...
- 2018.11.16javascript课上随笔（DOM）
<li> <a href = "“#”>-</a> </li> <li>子节点:文本节点(回车),元素节点,文本节点. 不同节点树 ...
- css随笔1
1.简单清除浏览器样式 *{ padding: 0px; margin: 0px; } 2.得到屏幕范围的div html,body{ width: 1 ...
随机推荐
- Activity活动
自定义一个类继承Activity类后结构已经很好了 提供了finish()来销毁活动 要记得注册
- Arduino101学习笔记（十三）—— 101六轴传感器
一.相关API 1.begin:需要在其他CUIREIMU前调用 //***************************************************************** ...
- yaml官方介绍
官方网站 http://yaml.org/ 数据结构类型说明 http://yaml.org/type/ YAML Specification http://yaml.org/spec/
- loadrunner参数化excel数据
LR参数化数据源Oracle,MSSQL,Excel参数化的方法: 重点介绍excel数据参数化的方法: 1.首先创建excel表格: 注意要写列明 2.创建excel表连接: 参数化完成后, ...
- HTTP基础05--http首部
HTTP 报文首部 HTTP 请求报文 在请求中,HTTP 报文由方法.URI.HTTP 版本.HTTP 首部字段等部分构成. HTTP 响应报文 在响应中,HTTP 报文由 HTTP 版本.状态码( ...
- Android和SQLite版本对应关系
Android和SQLite版本对应关系 今天Xamarin群有人问到Android和SQLite版本如何对应,顺手查了一下,贴出来. SQLite 3.8.4.3: • 21-5.0-Lollipo ...
- [技术学习]js接口继承
js是面向对象语言,但是js又缺乏了面向对象的诸多特性,比如继承,没有接口继承也没有父类继承,因此有时候需要人工来实现继承. 一.首先看下java中面向对象的继承: //定义类鸟类的飞行动作 inte ...
- 转：ExpressBars中的停靠控件使用
http://www.cnblogs.com/jxsoft/archive/2011/08/25/2152872.html 1 新手上路 1.1 控件简介 Dock pan ...
- 使用maven 如何生成源代码的jar包
http://hw1287789687.iteye.com/blog/1943157
- http://blog.csdn.net/chenleixing/article/details/43740759
http://blog.csdn.net/chenleixing/article/details/43740759