请看下面的 HTML 片段：

<html>

  <head>

    <title>DOM 教程</title>

  </head>

  <body>

    <h1>DOM 第一课</h1>

    <p>Hello world!</p>

  </body>

</html>

从上面的 HTML 中：

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

您将在本教程的下一章中学到更多有关属性的知识。

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

这里的意思是获取元素id=a的div元素的innerHTML就是文本的值

HTML DOM 属性

属性是节点（HTML 元素）的值，您能够获取或设置。

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

实例

下面的代码获取 id="intro" 的 <p> 元素的 innerHTML：

实例

<html>

<body>

<p id="intro">Hello World!</p>

<script>

var txt=document.getElementById("intro").innerHTML;

document.write(txt);

</script>

</body>

</html>

亲自试一试

在上面的例子中，getElementById 是一个方法，而 innerHTML 是属性。

innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>。

nodeName 属性

nodeName 属性规定节点的名称。

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

获取元素的值

下面的例子会取回 <p id="intro"> 标签的文本节点值：

实例

<html>

<body>

<p id="intro">Hello World!</p>

<script type="text/javascript">

x=document.getElementById("intro");

document.write(x.firstChild.nodeValue);

</script>

</body>

</html>

亲自试一试

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

HTML DOM的学习的更多相关文章

HTML DOM（学习笔记二）
嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...
DOM编程学习笔记（一）
PS:虽然自己JS基本语法算是掌握了,但是其实在JS掌握的只是远远还不够,网页上有太多好看的动态效果都是用JS 做出来的,自己也就仅仅会那么一两个动态的效果,学的只是皮毛...等有空的时候一定要好好的 ...
HTML DOM简易学习笔记
文字版:https://github.com/songzhenhua/github/blob/master/HTML DOM简易学习笔记.txt 学习地址:http://www.w3school.co ...
HTML DOM（学习笔记一）
嗯,工作也有一段时间了,对编程的认识也深入了一些,以前认为HTML/CSS/JAVASCRIPT是比较简单的,看网上的教程就可以了,W3C是我学习这些知识常去的一个网站,非常感谢她让我学习到了更多的一 ...
DOM的学习
今天学习了DOM,感觉学习起来真的没那么简单啦,这不是一个好现象啊,只有依靠自己大补课,嘿嘿,具体的总结了一下,今天学习的其实并不多,仅仅学习了不同的节点类型,但是知识还是蛮碎的,要一点一点的总结,昨 ...
DOM扩展学习笔记
对DOM的两个主要扩展是Selectors API(选择符API)和HTML5,还有一个不太瞩目的Element Traversal元素遍历规范为DOM添加了一些属性,另外还有一些专有扩展. 选择符A ...
轻松学习JavaScript十八：DOM编程学习之DOM简单介绍
一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分 ...
HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画
SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...
HTML5的 2D SVG和SVG DOM的学习笔记（1）
(项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述可缩放矢量图形(Sc ...
【DOM】学习笔记
三. 一份文档就是一颗节点树节点类型:元素节点——属性节点.文本节点 getElementById()返回一个对象,对应一个元素节点 getElementByTagName()返回一个对象数组,分别 ...

随机推荐

java-阿里云发送短信
 <dependency> <groupId>com.aliyun</groupId> <artifactId ...
Web前端开发HTML基础
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记),相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标 ...
微信小程序使用页面栈改变上一页面的数据
微信小程序中如果从一个页面中进入下一个页面,如果下个页面的数据有删除或者增加再返回上一个页面的时候,就会导致页面不刷新(数据加载函数在onload中),从而造成数据不一致的情况.其实在微信小程序中是可 ...
首个springboot项目总结
项目说明:采用分布式架构的基于restfulApi的后端微服务api项目. 用到的技术栈:springboot.mybatis.swagger.eureka注册中心.gateway.awss3.doc ...
Spring的AOP，Struts2的拦截器（Interceptor），以及springMVC的（interceptor）
参考外链:http://www.ibm.com/developerworks/cn/java/j-lo-springaopfilter/ 1.首先,spring的AOP作用范围很广,可以使用Aspec ...
linux之信息查看
在使用Linux操作系统的时候,有时候会需要了解当前使用的系统版本信息,特别是在给别人进行服务器部署运维的时候,准确的系统版本信息至关重要查看linux内核版本信息: cat /proc/vers ...
ccs之经典布局（二）（两栏，三栏布局）
接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...
第七篇 CSS盒子
CSS盒子模型在页面上,我们要控制元素的位置,比如:写作文一样,开头的两个字会空两个格子(这是在学校语文作文一样),其后就不会空出来,还有,一段文字后面跟着一张图,它们距离太近,不好看,我们要移 ...
pip 报错找不到pip问题
具体报错如下解决办法: wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate 使用当前python3运行
oracle数据泵expdp和impdp使用
expdp和impdp优缺点优点: expdp/impdp命令,我们也通常称之为“数据泵(DataPump)”,它具有以下优点: l 在性能上,具有并行处理能力,因此可以获得性能上的优势,加快导入导 ...

HTML DOM的学习