HTML DOM详细知识
1:节点
HTML DOM中,所有的事物都是节点。
整个文档是一个文档节点;
每个HTML元素是一个元素节点;
每个元素内的文本是一个文本节点;
每个属性是一个属性节点;
每个注释是一个注释节点;
2:方法
首先理解“编程接口”的概念:我们可以通过编程语言(如javaScript)对HTML DOM进行访问,这里把HTML元素视为对象,编程接口就是对象的方法和属性。通过方法和属性来对对象进行操作。
HTML DOM方法是可以在节点上执行的动作。
常用的HTML DOM方法:
getElementById(id):获取带有指定id的节点(元素);
getElementsByTagName(tagName):获取包含指定标签名称的所有元素的节点列表(集合、数组);
getElementsByClassName(className):获取包含指定类名的所有元素的节点列表(集合、数组);
appendChild(node):插入新的子节点;
removeChild(node):删除子节点;
3:属性
HTML DOM属性是节点上能够获取或设置的值。
innerHTML属性:获取元素内容,对于获取或替换HTML元素的内容很有用。
nodeName属性:规定节点的名称。它是只读的。元素节点的nodeName与标签名相同,属性节点的nodeName与属性名相同,文本节点的nodeName为#text,文档节点的nodeName为#document。
nodeValue属性:规定节点的值。元素节点的nodeValue为undefined或者null,文本节点的nodeValue为文本内容,属性节点的nodeValue为属性值。
nodeType属性:返回节点的类型,是只读的。元素节点的nodeType为1,属性节点的nodeType为2,文本节点的nodeType为3,注释节点的nodeType为8,文档节点的nodeType为9。
4:访问
访问节点也就是查找HTML的元素。
对HTML DOM节点的访问主要通过上文所说的方法来进行。
5:修改
修改HTML DOM意味着很多方面的内容,如:
该表HTML内容、改变CSS样式、改变HTML属性、创建新的HTML元素等等。
创建HTML内容:最简单的方式是使用innerHTML属性。如:
document.getEmlemntById("p1").innerHTML="新文本";
改变HMTL样式:如:
document.getElementById("p1").style.color="red";
document.getElementById("p1").style.fontSize="larger";
创建新的HTML元素:需要先创建新节点,然后把它追加到已有的元素节点上。如:
var para = document.creatElement("p");
var node = document.creatTextNode("这是一个新段落");
para.appendChild(node);
document.getElementById("div1").appendChild(para);
6:事件
HTML DOM允许JavaScript对HTML事件做出反应。当事件发生时,可以执行JavaScript。比如用户点击某个元素时执行代码。
事件属性:使用事件属性来向元素分配事件。如:
<button onclick="displayDate()">点我</button> //向botton属性分配了onclick事件。
使用HTML DOM来分配事件:如:
document.getElementById("p1").onclick=function(){displayDate()};
onload和onunload事件:当用户进入和离开页面时,会触发onload和onunload事件。它们可用于检查浏览器类型、处理cookies。
onchange时间:常用于输入字段的验证。当焦点离开时会触发。如:
<input type="text" id="fname" onchange="upperCase()">
onmouseover和onmouseout事件:当鼠标指针移动到或离开元素时会触发。
onmousedowm、onmouseup及onclick事件:他们是一次鼠标点击的全部过程。当鼠标按钮被点击时,出发onmousedown,鼠标按钮松开时,触发nomouseup,最后鼠标点击完成,触发onclick。也就意味着,需要定义一次点击事件时,可以直接使用onclick。当需要点击和松开事件时,需要另外两个。
7:导航
在HTML DOM中通过节点关系来进行导航。
节点列表:节点列表是一个节点数组,通过下标可以访问相应的节点。与数组相似,通过length属性可以返回数组长度(节点个数)。
节点关系:可以使用三个节点属性,分别是:parentNode、firstChild及lastChild。
根属性:document.documentElement:全部文档; document.body:文档的主体。
childNodes和nodeValue:除了使用innerHTML,还可以使用childNodes和nodeValue属性来获取元素内容。如:
txt = document.getElementById("intro").childNodes[0].nodeValue; //获取id为intro的元素的第一个子元素的值
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
轻松搞定RabbitMQ开篇:Java消息队列与JMS的诞生
Java 帝国之消息队列 原创: 刘欣 码农翻身 2017-02-06 张家村的历史 Java 帝国的张家村正在迎来一次重大的变革。 5年前网上购物兴起的时候, 帝国非常看好, 决定向这个领域进军, 于是兴建了张家村, 在这里安装了Java 虚拟机和数据库, 然后部署了一个基于Web的订单系统和一个库存系统, 由张家村的人负责操作。 张家村的老村长很清楚, 说是两个系统, 其实是逻辑上的一种划分方式, 在物理上两个系统还是部署在一个虚拟机中。 那个时候用户量少, 数据量也不大, 村民们只要使用这一个Java 虚拟机和数据库就足够了。 订单和库存系统运转一直很好, 用户的订单来了, 会在订单系统中存下来, 然后通知库存系统发货。 你要问怎么通知? 老村长会告诉你说: 其实简单的很, 就是普通Java 方法的直接调用, 调用库存系统某个类的某个方法而已。 由于在同一个虚拟机之内, 效率极高 。 转眼间5年过去了, 人类变得越来越懒, 越来越喜欢网上购物, 用户量和数据量暴增, 再加上他们时不时搞个什么秒杀活动, 更是让张家村变得不堪重负。 为了应付汹涌而来的订单, 张家村经常彻夜灯火通明,...
- 下一篇
HTML 块标签,行内标签,行内块标签以及之间的相互转换
HTML标签分类 行内标签: 包含a、span、em、strong、b、i、u、label、br; 特点:可以多个标签存在一行,不能直接设置行内标签的高度、宽度、行高以及顶和底边距,完全靠内容撑开宽高! a标签:主要用来链接一个其他的网页; span标签:主要用来对行内的文字进行一些样式以及其他的操作; em标签:一般用来对文字进行强调,使用斜体体现出来; strong标签:一般用来对文字进行强调,使用加粗字体体现出来; img标签:图片引用标签,其中 src属性中写入图片的地址; var标签:JavaScript中命名变量的标签。 块标签: 包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form; 特点:独占一行,对高度、宽度、行高以及顶和底边距都可设置的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽; p标签:段落标签,段落文字使用,默认格式:段尾进行换行; div标签:划分块的主要使用标签; ul标签:无序列表的主标签,后面的标号为圆点(黑色); ol标签:有序列表的主标签,后面一般跟有序的1,2,3,4,5...; li标签:列表中的...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS7设置SWAP分区,小内存服务器的救世主
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS6,CentOS7官方镜像安装Oracle11G
- Hadoop3单机部署,实现最简伪集群
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS7安装Docker,走上虚拟化容器引擎之路