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 ...

随机推荐

推荐一些顶级的Android开发书籍（转）
本帖对Android开发菜鸟和中级老兵同样适用,因为本帖重点列出了那些最常用的Android开发资源. 推荐书籍你或许觉得,都现在了,再去看个什么书来学习Android开发,这方法应该早就过时了.没 ...
Android LayoutInflater详解（转）
在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById().不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例 ...
写给自己的web开发资源
web开发给我的感觉就是乱七八糟,而且要学习感觉总是会有东西要学习,很乱很杂我也没空搞,(其实学习这个的方法就是去用它,什么你直接用?学过js么学过jquery么?哈哈,我没有系统的看完过,但是也做出 ...
Java学习笔记（九）——继承
一.继承 1.概念: 继承是类于类之间的关系,是一种"is a "的关系 Ps: Java是单继承 2.优势: (1)子类直接拥有父类的所有属性和方法(除了privata) (2) ...
智能车学习（十一）——陀螺仪学习
一.学习说明感觉就是配置I2C通信,然后直接移植51代码... 二.代码分享: 1.头文件: #ifndef I2C_GYRO_H_ #define I2C_GYRO_H_ /*********** ...
View(三)
大家在平时使用View的时候都会发现它是有状态的,比如说有一个按钮,普通状态下是一种效果,但是当手指按下的时候就会变成另外一种效果,这样才会给人产生一种点击了按钮的感觉.当然了,这种效果相信几乎所有的 ...
Jmeter 小攻略（转）
http://www.myexception.cn/open-source/1346307.html
Windows Server 2008 R2 实现多用户同时登陆
Windows Server 2008 R2远程用户数设置在windows server 2008 R2里面,默认的远程桌面连接数为1.这对我们的服务器管理带来了很大的不便,那么怎样来修改2008 ...
hdu 1030 Delta-wave
Delta-wave Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
去除android手机滚动条
方法1:::-webkit-scrollbar{display: none;} 方法2:::-webkit-scrollbar{height:0; width:0:}