DOM基础知识(概念、节点树、事件、Document)
1、 DOM概念
全称为 Document Object Model,译为文档对象模型
D:文档 - DOM将HTML页面解析为一个文档 —> document对象
O:对象 - DOM将HTML页面中内容解析为对应的对象
M:模型 - DOM中对象之间的关系(节点树结构)
DOM的级别:0 级别:不是W3C的规范; 1、2、3级是W3C规范
l W3C对DOM的定义
DOM是一个独立于任何语言和平台的接口,允许任何语言或脚本动态地访问和更新HTML文档的内容、结构和样式。该HTML页面可以进一步处理,并且该处理的结果可以被合并到所呈现的HTML页面中。
l DOM的组成部分
DOM CORE; DOM HTML; DOM CSS; DOM XML;
2、DOM节点树
² DOM树结构
将HTML页面解析为一个树形结构
l 节点:
概念:树结构中每个连接的地方(元素、属性和文本)
(1)文档节点---表示整个HTML 页面(相当于document 对象)
(2)元素节点---表示HTML页面中的标签(即HTML页面的结构)
(3)属性节点:
(4)文本节点---表示HTML页面中的标签所包含的文本内容。
l 判断节点类型:
3、事件
概念:HTML页面或者浏览器窗口发生的一些交互瞬间
分类:键盘事件
键盘事件表示当用户操作键盘时发生。
onkeydown 用户按下一个按键; onkeyup 用户松开一个按键
onkeypress 键盘的按键按了一下( keydown + keyup 的组合)
oninput 输入事件
event事件对象提供哪些获取到有关键盘的属性
charCore 得到对应键盘的值-97
keyCode 得到对应键盘的值-97
which 得到对应键盘的值-97
注:三个event事件对象的属性,IE8及以下版本均不支持
key 得到对应键盘的值-a
鼠标事件
click 用户单击鼠标按键; dblclick 用户双击鼠标按键
mousedown 用户按下鼠标按键; mouseup 用户松开鼠标按键
mouseover 用户将鼠标移到指定标签上; mousemove 用户移动鼠标
mouseout 用户将鼠标从指定标签上移开
- Ø 事件的执行流程:
获取 HTML 页面中指定的标签;为指定标签绑定指定事件;编写事件发生时的逻辑代码。
var 名称 = document.getElementById('id的名称');
名称.onclick=function( ){内容输出}
- Ø HTML文档的加载:
想要在head里面运行script 需要head中script添加window.onload = function( ){ }
4、Document对象
document对象作为DOM解析HTML页面的入口
u DOM查询
² 优点:速度快,性能好; 缺点:单操作麻烦
getElementById( ):通过元素的id属性查找
注: 元素的id属性值必须是唯一的; 通过该方法获取的元素只能是唯一的
getElementsByName( ):通过元素的name属性查找
注: 元素的name属性不唯一,可能多个元素相同name属性; 通过该方法获取的元素可能是一个,也可能是多个。结构非常类似于数组的结构,但并不是一个数组。
结果类型—> NodeList(节点集合);类似于数组结构的对象—>类数组对象
getElementsByTagName( ) :通过元素的标签名查找
getElementsByClassName( ):通过元素class属性查找(新增方法,IE 8及以下浏览器不可
解决兼容性问题 -自定义函数
function getElementsByClassName(element,className){
if(document.getElementsByClassName){
}else{
}
}
² 优点:操作方便; 缺点:速度慢,性能差
querySelector( ) - 利用CSS选择器的用法
作用:返回与css选择器匹配的第一个元素
querySelectorAll( ) - 利用CSS选择器的用法
作用:返回与css选择器匹配的所有元素
u NodeList类型
- 动态NodeList
含义 - 获取的集合随着页面的变化而变化; 特点 - 执行速度快,耗时短
方法:getElementsByName( ) getElementsByTagName( ) getElementsByClassName( )
- 静态NodeList
含义 - 获取的集合不会随着页面而变化; 特点 - 执行速度慢,耗时长
方法 - querySelectorAll()
u 创建节点:
² 元素节点 - createElement(‘标签名‘)
² 属性节点 - createAttribute(‘属性名‘)
步骤: [创建属性节点时,只能定义属性名,而不能定义属性值]
1. 创建属性节点: var attr = createAttribute(‘属性名‘)
2. 设置属性节点的值: attr.nodeValue = value;
3. 添加属性节点: A.setAttributeNode(B) 将B添加到A 上
注:属性节点不是一个子节点,不可用 ( A)appendChild(B )
² 文本节点 - createTextNode(文本内容)
- Ø document对象属性(获取元素):
documentElement属性:获取页面中<html>; 即document. documentElement
head属性:获取页面中<head> ; 即document. head
body属性:获取页面中<body>; 即document. body
forms属性:获取HTML页面中所有的表单元素 即document. forms
images属性:获取HTML页面的图片元素 即document. images
DOM基础知识(概念、节点树、事件、Document)的更多相关文章
- HTML DOM基础知识
HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...
- HTML DOM 基础知识,成为javascript晋级高手的必备手册
一.DOM 简介,什么是 DOM? 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口. 标记语言,也称置标语言,是一种将文本( ...
- DOM基础知识整理
--<JavaScript高级程序设计>Chapter10学习笔记 一.节点层次 1.Node类型 1)(Node).nodeType属性 节点nodeType属性有12种. 检测node ...
- javascript中DOM基础知识介绍
1.1. 基本概念 1.1.1. DOM DOM Document Object Model 文档对象模型 就是把HTML文档模型化,当作对象来处理 DOM提供的一系列属性和方法可以 ...
- DOM基础+domReady+元素节点类型判断
DOM节点类型 nodeType element 1 Node.ELEMENT_NODE 元素节点 attr 2 Node.ATTRIBUTE_NODE 属性节点 text 3 ...
- Javascript--HTML DOM基础知识
1.HTML DOM是什么,以及它的作用: w3c对DOM有一系列的解释和定义,用自己理解的话来说就是:HTML DOM是html的标准对象模型,可以使JavaScript去操作(获取,修改,删除,添 ...
- DOM基础知识
DOM BOMDOM 文档对象模型 document.BOM 浏览器界面上所有内容 broder object.没有括号属性.()方法 DOM写法 document.作用 做特效 找到 摘出元素 增删 ...
- DOM基础知识(Node对象、Element对象)
5.Node对象 u 遍历节点 u 父节点 .parentNode - 获取父节点—> 元素节点或文档节点 .parentElement - 获取父元素节点—> 元素节点 u 子节 ...
- asp.net架构基础知识--页面以及全局事件
1.asp.net的请求过程,以及对应的处理请求的dll客户的请求页面由aspnet_isapi.dll这个动态连接库来处理,把请求的aspx文件发送给CLR进行编译执行,然后把Html流返回给浏览器 ...
随机推荐
- 分层、链式分析、url、联系的长度
分层.链式分析.url.联系的长度. 分层结构符合软件处理的工具链性和步骤性: 分层的每一次都是一个节点或步骤: 链式结构普遍存在于自然界,比如食物链: 联系是普遍存在的,不只是两个事物间的联系,而且 ...
- SciSharpCube:容器中的SciSharp,.NET机器学习开箱即用
SciSharp Cube 在Docker容器中快速体验SciSharp机器学习工具的最新功能. 项目地址:https://github.com/SciSharp/SciSharpCube 从Dock ...
- 洛谷P1654 OSU!_概率与期望
Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 1000000 ...
- Map之HashMap的get与put流程,及hash冲突解决方式
在java中HashMap作为一种Map的实现,在程序中我们经常会用到,在此记录下其中get与put的执行过程,以及其hash冲突的解决方式: HashMap在存储数据的时候是key-value的键值 ...
- 用Navicat Prenium12连接Oracle数据库(oracle11g版本)时报错ORA-28547:connection to server failed,probable Oracle Net admin error.解决办法
上网一查原来是oci.dll版本不对.因为Navicat是通过Oracle客户端连接Oracle服务器的,Oracle的客户端分为两种,一种是标准版,一种是简洁版,即Oracle Install Cl ...
- "SetDestination" can only be called on an active agent that has been placed on a NavMesh. 解决办法
1.设置了 navmesh之后 要bake 也就是烘焙之后 才有效果 2.在unity 中 window->navigation 4.基本上问题应该得以解决:
- 在小程序中实现全局混入,以混入的形式扩展小程序的api
GitHub: https://github.com/WozHuang/mp-extend 相关文章: 小程序全局状态管理,在页面中获取globalData和使用globalSetData 通过页面预 ...
- Vue学习之路第十九篇:按键修饰符的使用
1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...
- 分类IP地址
分类IP地址是将IP地址划分为若干个固定类. IP地址由网络标识字段(netID)和主机标识字段(hostID)组成.IP地址可以标识为: IP地址:: = { <网络标识>,<主机 ...
- 用2003版的Excel使用“宏”打开NMON软件生产的.nmon文件
用2003版的Excel使用“宏”打开NMON软件生产的.nmon文件 nmon analyser——生成 AIX 性能报告的免费工具,可从 NMON 的输出中生成大量的报告图形.nmon_analy ...