DOM分类及HTML DOM
DOM简介
DOM是W3C(World Wide Web Consortium)标准。
“W3C 文档对象模型(DOM,全称Document Object Model)”是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。
DOM被分为3个不同的部分/级别:
- 核心 DOM
- XML DOM
- HTML DOM
核心DOM:提供了操作文档的公有属性和方法,就相当于鼻祖。它可以可操作一切结构化文档的API,包括HTML和XML。是万能的!但是很繁琐!
HTML DOM:它是专门操作HTML文档的简化版DOMAPI仅对常用的复杂的API进行了简化,对核心DOM进行了在HTML方面的拓展。不是万能的!但是简单
XML DOM:提供了所有XML元素的对象和属性,以及访问方法,与HTML DOM类似。
HTML DOM
节点概念
HTML DOM 把所有的元素全部转化为节点对象,以后要想操作HTML里的内容就等于操作节点。
节点分类
- 文档节点[object HTMLDocument]
- 元素节点[object HTMLXXXElement]
- 属性节点[object Attr]
- 内容节点[object Text]
1、文档节点就是根,只存在一个,想要得到它十分容易,写一个 document 相当于文档节点了。
<script>
document.write(document);
</script>
渲染结果
2、元素节点:文档节点是根,所以他肯定有许多小弟了,比如 div 、p等等,都是元素节点,属于文档节点的下级。
3、属性和内容节点:id就是div的一个属性节点的节点名,“HTML DOM”就是div内容节点的节点值,节点名和节点值就是节点的属性之一。
<div id="div1">HTML DOM</div>
DOM查找
获取元素节点
我们对DOM操作,最重要的是想修改它的内容,而想要修改DOM元素,我们必须先找到他
- document.getElementById 通过id获取元素节点
- getElementsByTagName 通过标签名称获取元素节点
- getElementsByClassName 通过类名获取元素节点
- getElementsByName 通过表单元素的name获取元素节点
- querySelector("[selector]") 支持一切css中的选择器,但如果匹配多个,只会返回第一个
- querySelectorAll("[selector]") 返回所有选中的元素
因为id是唯一的,所以上面除了通过id获取元素节点外,其他获取到的都是节点数组。
例如:
<!--id获取到是单个元素-->
<div id="div1" >
HTML DOM
</div> <script>
var div1 = document.getElementById("div1");
//或者
div1 = document.querySelector("#div1");
document.write(div1);
</script>
渲染结果
<!--其他获取到的是元素数组-->
<div id="div1" >
HTML DOM
</div> <script>
var divs = document.getElementsByTagName("div");
var div1 = divs[0];
</script>
渲染结果
遍历元素数组,根据javascript的知识,数组有个属性length,因此我们可以使用for循环遍历他
<div class="div">
HTML DOM
</div>
<div class="div">
DIV2
</div> <script> console.log("--getElementsByTagName--");
var element = document.getElementsByTagName("div");
for(var i = 0; i < element.length; i++){
console.log(element[i].innerText);
} console.log("--querySelectorAll--");
element = document.querySelectorAll("div");
for(var i = 0; i < element.length; i++){
console.log(element[i].innerText);
} console.log("--querySelectorAll select class--");
element = document.querySelectorAll(".div");
for(var i = 0; i < element.length; i++){
console.log(element[i].innerText);
}
</script>
获取属性节点
首先需要获取到元素节点,然后可以通过attributes获取元素节点的属性节点,属性可以有多个,所以获取到是属性节点数组。
若要获取某一指定的属性的节点例如id,可以通过键名xx["id"]获取到属性节点。
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是:"+ as["id"].nodeValue);
</script>
渲染结果
获取内容节点
通过childNodes获取到的第一个子节点就是内容节点
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var content = div1.childNodes[0];
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue);
</script>
渲染结果
节点的属性
- nodeName 节点名称
- nodeValue 节点值
- nodeType 节点类型
- innerHTML 元素节点的文本信息
- 元素节点的属性,可直接访问
- id
- value
- className
<div id="div1" class="d">
愿用一生守护你
</div>
<hr>
<script>
function w(s){
document.write(s);
} //元素节点
var div1 = document.getElementById("div1");
//属性节点数组
var attrs = div1.attributes;
//遍历属性节点
for(var i = 0; i < attrs.length; i++){
//节点名
w(attrs[i].nodeName);
w(" : ");
//节点值
w(attrs[i].nodeValue);
w("<br>");
} //获取内容节点的节点值
var value = div1.childNodes[0].nodeValue;
w(value);
w("<br>");
//获取内容节点太复杂了,简化一点
var singleValue = div1.innerHTML;
w(singleValue);
w("<br>"); //直接访问内置的属性
w(div1.id);
w("<br>");
w(div1.className);
</script>
渲染结果
<div class="div"> HTML DOM</div><div class="div">DIV2</div>
<script>
console.log("--getElementsByTagName--"); var element = document.getElementsByTagName("div"); for(var i = 0; i < element.length; i++){ console.log(element[i].innerText); }
console.log("--querySelectorAll--"); element = document.querySelectorAll("div"); for(var i = 0; i < element.length; i++){ console.log(element[i].innerText); }
console.log("--querySelectorAll select class--"); element = document.querySelectorAll(".div"); for(var i = 0; i < element.length; i++){ console.log(element[i].innerText); } </script>
div1
DOM分类及HTML DOM的更多相关文章
- javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- proxy 利用get拦截,实现一个生成各种DOM节点的通用函数dom。
const dom = new Proxy({}, { get(target, property) { return function(attrs = {}, ...children) { const ...
- js学习总结:DOM节点二(dom基本操作)
一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...
- python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)
昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...
- 全面理解虚拟DOM,实现虚拟DOM
1.为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需 ...
- 通俗易懂的来讲讲DOM——科普性质的DOM入门教程
DOM这个东西很重要,不过初学的时候很容易蒙,什么Document.Element.Node用官方语言来解释根本就不是人话,只能在实践中硬着头皮一点一点尝试.今天要推荐的是一篇关于DOM的博客.说是教 ...
- 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作
jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...
随机推荐
- post请求下载文件,获取Content-Disposition文件名
1.post下载文件代码,doload方法 import request from "../../src/utils/request"; import { API } from & ...
- .NET 云原生架构师训练营(模块二 基础巩固 RabbitMQ HelloWorld)--学习笔记
2.6.3 RabbitMQ -- HelloWorld 发送端 接收端 rabbitmq container 发送信息 https://www.rabbitmq.com/tutorials/tuto ...
- oracle坚决不挂01(表,索引,视图的创建,修改,删除,查询)
考试快来了,来篇oracle干货,复习一下(挣扎一下) 废话不多说,开始写! 这篇是数据库对象的有关操作的总结! 数据库对象有熟悉的表,视图,索引,序列,同义词等(这个oracle东西真不少,小声bb ...
- 纯原生javascript下拉框表单美化实例教程
html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...
- 学习Java第一天
public 保证类名和文件名一致 关键字字母全小写,编辑器中有颜色标记 null空常量不能打印 变量就是内存中的存储空间 计算机中最小的存储单元时字节(byte) //1字节(B) = 8位(bit ...
- js实现简单的俄罗斯方块小游戏
js实现简单的俄罗斯方块小游戏 开始 1. 创建一个宽为 200px,高为 360px 的背景容器 <!DOCTYPE html> <html lang="en" ...
- OpenStack各组件的常用命令
openstack命令 openstack-service restart #重启openstack服务 openstack endpoint-list #查看openstack的 ...
- Redis二进制安全
为了便于理解,举一个例子: 在很多编辑器中,都会默认/n是换行字符,也就意味着一串字符存进去,涉及/n都会做一个默认的转义处理,这在编辑语言中,C也有这个特性,例如字符串Hello,\0 World! ...
- cookie加密 当浏览器全面禁用三方 Cookie
cookie加密 cookie localstorage 区别 https://mp.weixin.qq.com/s/vHeRStcCUarwqsY7Y1rpGg 当浏览器全面禁用三方 ...
- (Oracle)看懂Oracle执行计划(转载)
最近一直在跟Oracle打交道,从最初的一脸懵逼到现在的略有所知,也来总结一下自己最近所学,不定时更新ing- 一:什么是Oracle执行计划? 执行计划是一条查询语句在Oracle中的执行过程或访问 ...