DOM的使用
1. 修改:
3样:
1. 内容: 3个属性:
1. 获取或修改原始HTML片段: 元素.innerHTML
2. 获取或修改纯文本内容: 元素.textContent
vs innerHTML
1. textContent去掉了内嵌的标签
2. textContent将特殊符号翻译为正文
以上两个获得的都是双标记中,开始标记和结束标记之间的内容
问题: 表单元素是单标记,没有结束标记,所以也就没有innerHTML和textContent
3. 获取或设置表单元素的内容: 表单元素.value
2. 属性: 3种:
1. HTML标准属性:
什么是: HTML标准中规定的那些字符串类型的属性。比如: id, title, class, name, value, src, href...
获取或修改HTML标准属性: 2种方式:
1. 早期的核心DOM函数: 4个:
var 属性值=元素.getAttribute("属性名") 获取属性值
元素.setAttribute("属性名","新值") 修改属性值
var bool=元素.hasAttribute("属性名") 判断元素是否包含该属性
元素.removeAttribute("属性名") 移除元素上的指定属性
2. 后来的HTML DOM函数:
什么是HTML DOM: 是在旧版基础上,对部分常用函数和常用对象提供的简化版函数。
做的第一个简化: 每个元素对象中都提前预置好了所有HTML标准属性,只不过,值暂时为""。
今后在操作HTML标准属性时,只要用: 元素.属性名
特例:
html中: <元素 class="类名"
js中不能用.class,因为class是js的关键词。所以,凡是操作html中的class属性,一律更名为className。js中操作className等效于操作HTML中的class。
获取属性值: 元素.属性名
修改属性值: 元素.属性名=值
强调: 只要修改标准属性,值必须是字符串。如果给的不是字符串,DOM会自动转为字符串。
判断是否包含指定属性: 元素.属性名!=="",说明包含。因为所有标准属性的默认值是""。
移除属性: 元素.属性名="";
只要把元素的属性值改为空字符串,则当前属性失效。
问题: 以上函数,只能操作字符串类型的HTML标准属性。无法操作bool类型的HTML属性:
2. 状态属性:
什么是: HTML标准中规定的,值为bool类型的属性: disabled selected checked multiple ...
特征: 所有状态属性在HTML中使用时,都不带=和属性值。加上,就起作用。去掉就失去作用。
如何操作:
不能用核心DOM的4个函数(getAttribute(), setAttribute(), hasAttribute(), removeAttribute()),因为核心DOM的四个函数只能操作字符串类型的属性
只能用.来访问,值都是bool类型:
比如:
禁用一个按钮: btn.disabled=true
相当于:
<button disabled>...
启用一个按钮:btn.disabled=false
选中一个checkbox:
chb.checked=true;
相当于:
<input type="checkbox" checked>
取消选中一个checkbox:
chb.checked=false;
补: CSS中有一组状态伪类:
:disabled :checked :selected
专门用于选择处于某种状态的元素
比如: input:checked 选择的是被选中的input元素
button:disabled 选择的是被禁用的按钮
3. 自定义扩展属性:
什么是自定义扩展属性: HTML标准中没有规定的,程序员自发添加的属性。
何时: 2个典型用途:
1. 在客户端html元素上临时缓存数据
比如: data-target="id值";
2. 代替其他选择器,用来选择触发事件的元素,为元素绑定事件。
比如: data-toggle="dropdown"
如何:
1. 为元素添加自定义扩展属性:
行业规范:
<元素 data-自定义属性名="值"
2. 用自定义扩展属性作为查询条件,只能用属性选择器:
[data-属性名=值]
3. 获取或修改自定义属性的值:
不能用.访问自定义扩展属性:
因为自定义扩展属性是程序员在html标准之外,后天添加的自定义属性。则HTML DOM的元素对象中就不包含这些自定义扩展属性。
1. 可以用核心DOM: ——没有兼容性问题
元素.getAttribute("data-属性名")
元素.setAttribute("data-属性名",值)
为什么: getAttribute()每次都是去HTML代码中查找属性。
2. HTML5标准中规定: 有兼容性问题
可以 元素.dataset.属性名
其中dataset可以自动收集页面上所有data-开头的自定义扩展属性。这就是为什么自定义扩展属性名习惯上都要带data-前缀的原因!
3. 样式:
1. 修改内联样式:
每个元素都有一个style属性,代表html中开始标签中的style属性。
元素的style属性中又包含了所有css样式属性
修改元素对象的style属性中的css样式属性,等效于直接修改html中开始标签中的style=""
比如: 元素.style.backgroundColor="red"
等效于: <元素 style="
再比如: 显示隐藏:
元素.style.display="block"
等效于: <元素 style="display:block"
元素.style.display="none"
等效于: <元素 style="display:none"
强调: 所有带-的css属性,一律去横线,变驼峰命名。
比如: list-style-type -> listStyleType
background-color -> backgroundColor
2. 获取样式:
问题: 元素.style仅包含内联样式,不包含样式表中的样式。所以,如果用元素.style.css属性,也只能获得内联样式,无法获得样式表中定义的样式。
解决: 获得计算后的样式:
什么是计算后的样式: 最终应用到这个元素上的所有样式的集合。
何时: 今后,只要获取样式,都要获取计算后的样式。
如何: 2步:
1. 先获得计算后的样式对象
var style=getComputedStyle(元素)
获得指定元素计算后的完整样式对象
强调: getComputedStyle是内置的全局函数,可直接使用!
返回值: 是一个包含所有css属性的巨大的对象
2. 才是从样式对象中提取想要的css属性:
var 属性值=style.css属性
强调: 计算后的样式,都是只读的。
因为样式的来源不确定,不确定有多少元素正在共享该属性。所以不允许擅自修改。以免牵一发而动全身。
总结: 想修改一个元素的css属性:
元素.style.css属性=值
想获取一个元素的css属性:
getComputedStyle(元素).css属性
问题: 修改样式时,style.css属性一句话只能改一个css属性。而网页中一个效果的变化,可能同时涉及多个css说行。如果用style.css属性=值 修改,代码会很繁琐。而且,加样式时繁琐一次,去掉样式时同样繁琐!
解决: 当批量修改样式时,用className修改是最划算的!
总结:
修改:
1. 内容:
1. 原始html 片段: .innerHTML
2. 纯文本: .textContent
3. 表单元素的内容: .value
2. 属性:
1. HTML标标准属性:
1. 核心DOM: .getAttribute()
.setAttribute()
.hasAttribute()
.removeAttribute()
2. HTML DOM: 也可用.改
2. 状态属性: 只能用.改
3. 自定义扩展属性:
定义: <元素 data-自定义属性名="值"
获取或修改:
元素.getAttribute("data-属性名")
元素.setAttribute("data-属性名","值")
HTML5: 元素.dataset.属性名
3. 样式:
1. 修改内联样式: 元素.style.css属性="值"
2. 获取: getComputedStyle(元素).css属性
DOM的使用的更多相关文章
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
- 通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
- HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
- HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
- 重撸js_2_基础dom操作
1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...
- 虚拟dom与diff算法 分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- jQuery学习之路(2)-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
随机推荐
- Jenkins(1)- centos7.X下安装Jenkins
如果想从头学起Jenkins的话,可以看看这一系列的文章哦 https://www.cnblogs.com/poloyy/category/1645399.html 下载安装包 wget http:/ ...
- cocos2d 导演,场景
导演(Director) Cocos2d-x 使用导演的概念,这个导演和电影制作过程中的导演一样!导演控制电影制作流程,指导团队完成各项任务.在使用 Cocos2d-x 开发游戏的过程中,你可以认为自 ...
- 数据挖掘入门系列教程(十一)之keras入门使用以及构建DNN网络识别MNIST
简介 在上一篇博客:数据挖掘入门系列教程(十点五)之DNN介绍及公式推导中,详细的介绍了DNN,并对其进行了公式推导.本来这篇博客是准备直接介绍CNN的,但是想了一下,觉得还是使用keras构建一个D ...
- 在Spring Boot中使用内存数据库
文章目录 H2数据库 HSQLDB Apache Derby SQLite 在Spring Boot中使用内存数据库 所谓内存数据库就是可以在内存中运行的数据库,不需要将数据存储在文件系统中,但是相对 ...
- 聊聊flink的BlobStoreService
序 本文主要研究一下flink的BlobStoreService BlobView flink-release-1.7.2/flink-runtime/src/main/java/org/apache ...
- Error: Can't find Python executable "G:\Python27"
错误如题,node-gyp官网介绍不够详细,应设置python.exe的具体绝对路径,如下所示: npm config set python G:\Python27\python.exe 转载于:ht ...
- WCF客户端和服务的实现
WCF客户端和服务 ?服务器端: – 定义和实现服务契约 – 为服务类型构建ServiceHost实例,暴露endpoints – 打开通讯通道 ?客户端: – 需要服务契约的一个副本和关于endpo ...
- 算法竞赛进阶指南--lowbit运算,找到二进制下所有是1的位
// lowbit运算,找到二进制下所有是1的位 int H[37]; // 预处理 for (int i = 0; i < 36; i++) H[(1ll << i) % 37] ...
- 图论--Dijkstra算法总结
Key word: ①BFS转换Dijkstra ②其他关系转化为最短路 ③反向建边及反向Dijkstra ④稠密图.稀疏图 ⑤链式前向星 ⑥Vector建图 ⑦超级源点&汇点 详解: 1.B ...
- Makefile中的CFLAGS,LDFLAGS,LIBS
CFLAGS:C编译器选项,而CXXFLAGS表示C++编译器的选项 1. CFLAGS参数 选项 说明 -c 用于把源码编译成.o对象文件,不进行链接过程 -o 用于连接生成可执行文件,在其后可以指 ...