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

随机推荐

Eclipse+CDT+GDB调试android NDK程序（转）
Eclipse+CDT+gdb调试android ndk程序先介绍一下开发环境,在这个环境下,up主保证是没有问题的. ubuntu 11.10 eclipse 3.7(indego) for ja ...
FZU Problem 2082 过路费树链剖分
Problem 2082 过路费 Problem Description 有n座城市,由n-1条路相连通,使得任意两座城市之间可达.每条路有过路费,要交过路费才能通过.每条路的过路费经常会更新, ...
Git的安装与使用
1,下载git https://code.google.com/p/msysgit/downloads/list 2,安装git ,我们选择命令行形式,这样无论在window下还是在linux下都可 ...
某app客户端数字签名分析
最近测试app时发现某app对数据包做了签名,其直接后果就导致截获的数据包没法修改,因此对该app的数字签名了进行了一次分析.
iOS10 UI教程视图的边界与视图的框架
iOS10 UI教程视图的边界与视图的框架 iOS10 UI视图的边界在视图的几何形状中我们提到了视图属性中的一部分属性可以将定义的视图绘制在屏幕上.其中典型的3个属性为边界属性.框架属性以及中心位 ...
Java命令行输入求和的简单学习
思想:命令行输入的参数,必须先转换为数字才能进行加法计算,这就需要引用java.util.Scanner; 流程框图: 源代码: //实现几个整数相加的程序 //高开拓,2015.9.26 packa ...
Thymeleaf 常用属性
Thymeleaf 常用属性如需了解thymeleafThymeleaf 基本表达式,请参考<Thymeleaf 基本表达式>一文 th:action 定义后台控制器路径,类似<f ...
Codeforces 611C New Year and Domino（二维前缀和）
题目大概说给一个n*m个格子,格子'.'表示可以放东西,多次询问矩形区域(x1,y1)-(x2,y2)有几种放一张1*2的骨牌的方案数. 分别考虑横着竖着放,预处理出二维的前缀和,即sum[x][y] ...
Codeforces 676C Vasya and String（尺取法）
题目大概说给一个由a和b组成的字符串,最多能改变其中的k个字符,问通过改变能得到的最长连续且相同的字符串是多长. 用尺取法,改变成a和改变成b分别做一次:双指针i和j,j不停++,然后如果遇到需要改变 ...
java基础-操作符
浏览以下内容前,请点击并阅读声明定义:操作符是一种能够对一个,两个或三个操作对象执行特定的操作,并返回一个结果的特定符号. java中操作符的种类和优先级如下表所示,除了赋值运算,所有二元操作符运 ...