DOM文档对象模型(拓展)

于 2023-03-15 23:43:10 发布
阅读量98 收藏
点赞数 1
文章标签： 前端 javascript html Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61773971/article/details/129564007
版权
本文介绍了SelectorsAPI，包括querySelector和querySelectorAll方法，用于根据CSS选择器匹配DOM元素。HTML5新增的matches方法和DOMTokenList接口简化了DOM操作。同时，文章讨论了焦点管理的activeElement和hasFocus方法，以及HTML5的自定义数据属性和字符集设置。还提到了性能和安全问题，如内存释放和防止XSS攻击。
摘要由CSDN通过智能技术生成
本文主讲:
selectors API
HTML5 DOM

Selectors API

Selectors API 本质为css选择符的模式匹配DOM元素,其规定了浏览器原生支持CSS查询API.

Level1 的核心为两个方法:querySelector() querySelectorall().在兼容浏览器中,Document和Element的实例上都暴露了这两个方法.

Level2在Element上规范了更多方法(match(),find(),findall())

querySelector()

querySelector()接收一个css选择符参数,返回第一个匹配的后代元素,否则返回null.

let a= document.querySelector('div')

querySelectorAll()

querySelectorall()接收一个css选择符参数,返回所有匹配到的节点.返回的是一个NodeList静态实例.

let a=document.querySelectorAll('div')//NodeList

matches()

matches()方法接收一个css选择符参数,如果元素匹配则返回true,否则返回false.

let matches=document.matches('div')//true

元素遍历

元素类型之间的操作属性:

childElementCount 返回子元素类型的个数

firstElementChild 指向第一个子元素类型节点

lastElementChild 指向最后一个子元素类型节点

previousElementSibling指向前一个Element类型的同胞元素

nextElementSibling 指向后一个Element类型的同胞元素

HTML5

css类扩展

  1. getElementsByClassName()

与getElementsByTagName()相似.

  1. classList属性

替代了className

classList是集合类型DOMTokenList的实例.

DOMTokenList的方法与属性:

length DOMTokenList包含多少项

item()

[]

add()添加指定字符串的值

contains()返回布尔值,与Set中的has()相似

remove()删除指定字符串的值

toggle()如果类名列表中已经存在指定的value,则删除,如果不存在,则添加

焦点管理

方法与属性:
document.activeElement
document.hasFocus()

document.activeElement 始终包含当前拥有焦点的DOM元素.

let button=document.getElementById('myButton')
button.focus()
console.log(document.activeElement == button)//true

默认情况下,document.activeElement在页面加载完之后会设置为document.body.而在页面完成加载之前,document.activeElement的值为null.

document.hasFocus()方法,返回布尔值,表示文档是否拥有焦点.

let button =document.getElementClassName('te')[0]
button.focus()
console.log(document.hasFocus())//true

HTMLDocument扩展

  1. readystate属性

document.readystate属性有两个可能的值:loading,complete.可以替代onload事件处理程序给的一个标签来确定文档是否加载完毕.

if(document.readystate==='complete'){}

  1. compatMade属性

document.compatMade指示浏览器当前处于什么渲染模式.

标准模式值为'CSS1Compat',混杂模式值为'BackCompat'

  1. head属性

document.head指向文档的<head>元素.与document.body相似

字符集属性

characterSet属性表示文档实际使用的字符集,也可以用来指定新字符集.

console.log(document.characterSet)//UTF-16
document.characterSet='UTF-8'

自定义数据类型

HTML5允许给元素指定非标准的属性,但要使用前缀data-

<div id='div1' data-d1='d1' data-d2='d2'></div>

dataset属性可以访问自定义数据属性,datset属性是一个DOMStringMap的实例,包含一组键值对映射.

元素的每个data-name属性在dataset中都可以通过data-后面的字符串作为键来访问.

let a=document.getElmentById('div1')
//取得自定义数据属性的值
let d1=a.dataset.d1
let d2=a.dataset.d2
//设置自定义数据属性的值
a.dataset.d1=23
a.dataset.d2='d222'
//添加自定义数据属性
a.dataset.d3='d3'
if(a.dataset.d1){
console.log('d1:${d1},d2:${d2},d3:${d3}')//d1:23,d2:'d222',d3:'d3'
}

插入标记

innerHTML属性

在读取innerHTML属性时,会返回元素所有的后代HTML字符串,包括元素,注释和文本节点.而在写入innerHTML时,则会根据提供的字符串值以新的DOM子树替代元素中原来包含的所有节点.

<div>dddddd</div>
let a=document.getElementsByTagName('div')[0]
a.innerHTML='/a/+ <b>str</b>'

旧IE中的innerHTML

在现代浏览器中,通过innerHTML插入的script标签是不会执行的.

但通过innerHTML插入的<style>是可以执行的.

outerHTML属性

读取outerHTML属性时,会返回调用它的元素(及其后代元素)的HTML字符串.

与innerHTML属性相似.

insertAdjacentHTML()与insertAdjacentText()

他们接收两个参数:要插入的位置,要插入的HTML或文本

第一个参数必须是下列值的一种:

beforebegin :插入当前元素的前面,作为前一个同胞节点

afterbegin:插入当前元素内部,作为新的子节点或放在第一个子节点前面

beforeend:插入当前元素 内部,作为新的子节点或放在最后一个子节点后面

afterend:插入当前元素的后面,作为后一个同胞节点

内存与性能问题

如果被移除的子树元素中之前有关联的事件处理程序或其他Javascript对象,那它们之间的绑定关系会滞留在内存中.在使用innerHTML,outerHTML之前,最好手动删除有关联的事件处理程序或其他Javascript对象.

尽量不要多次设置innerHTML,outerHTML.

跨站点脚本

使用innerHTML或outerHTML需要防止XSS攻击.

scrollIntoView()

scrollIntoView()方法存在于所有HTML元素上,可以滚动浏览器窗口或容器元素以便于包含元素进入视口.这个方法的参数如下:

alignToTop是一个布尔值

true:窗口滚动后元素的顶部与视口顶部对齐.

false:窗口滚动后元素的底部与视口底部对齐.

scrollintoViewOptions是一个选项对象

behavior:定义过渡动画,'smooth','auto'(默认)

block:定义垂直方向的对齐,'start'(默认),'center','end','nearest'

inline:定义水平方向对齐,'start','center','end','nearest'(默认)

不传参数等同于alignToTop为true

专有扩展

children属性

children只包含元素的Element类型 的子节点

contains()方法

Parentnode.contains(childNode)childNode是否为ParentNode的子元素

compareDocumentPosition()方法也可以确定节点间的关系.这个方法返回表示两个节点关系的位掩码.

插入标记

innerText

与innerHTML相似,插入的是文本

outerText

与outerHTML相似,插入的是文本

滚动

scrollIntoViewIfneeded(aligncenter)会在元素不可见 的时候,将其滚动到窗口或包含窗口中,使其可见.

如果元素可见,这这个方法什么也不做.如果将参数设置为true,浏览器会尝试将其放在视口中央.

努力学习前端的荼霜
关注
APl DOM文档对象模型
m0_46978034的博客
12-07 243
文章目录一.DOM简介 一.DOM简介 1.什么是DOM 文档对象模型(简称DOM) 是W3C组织推荐的处理可扩展标记语言的标准编程接口 W3C已经定义来一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构样式。 2.DOM 树 文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 ...
Javascript焦点管理-document.activeElement
wujunlei1595848的博客
05-31 3803
document.activeElement指向页面中当前获得焦点的元素； 元素获得焦点的方式； 文档刚加载完，document.activeElement指向document.body； 文档加载期间，document.activeElement指向null。 ...
JS代码：DOM(document object model)
weixin_43731793的博客
07-21 304
DOM(document object model): 1、直接可以获取的dom元素对象: 1.document.documentElement 2.document.head 3.document.title 4.document.body html、body、title和head标签 <body> <h1>linux is very much!</h1&gt...
JS高级学习
最新发布
19年的墨先生的博客
12-07 570
JS 高级学习
vue3聊天定位到最下面
yun_shuo的博客
08-25 2269
vue3聊天定位到最下面 在vue中做聊天功能时,消息模块通常是固定高度后设置overflow:auto;但当消息过多后,会产生滚动条,这时将消息默认定位到底部可以利用scrollIntoView()方法。关键代码如下； nextTick(() => { chatRoom.value.lastElementChild.scrollIntoView() }) scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。 nextTick()是将回调
Element.scrollIntoView()的使用
The_more_more的博客
07-24 1065
MDNElement接口的方法会滚动元素的父容器，使被调用的元素对用户可见。简单的来说就是调用这个方法的元素会出现在可视区域，也就是我们应该看到的区域。//等同于element.scrollIntoView(true)element.scrollIntoView(alignToTop);//Boolean型参数element.scrollIntoView(scrollIntoViewOptions);//Object型参数我们如果不传值的话，括号的内容默认是true的顶部与。...
DOM（document object model）文档对象模型
10-12
本文概述DOM分类,document的方法以及属性、element的方法和属性document获取全局内容和创建全局内容，其中包括了节点属性和节点的相关方法和分类，本文结尾拓展了操作节点的方法和删除空文本节点的相关方法
采集基本概念Web信息检索与数据抓取网页DOM结构拓展优秀文档.pptx
11-14
在这个领域，DOM（Document Object Model）结构扮演了核心角色，它是HTML和XML文档的一种标准模型，为编程人员提供了访问和操作网页内容的接口。 DOM是一种树形结构，其中树根通常指的是`window`或`document`对象。...
javascript拓展DOM操作 prependChild insertAfert
10-28
DOM（文档对象模型）是表示和交互式地操作文档内容的一种API。在JavaScript中，有多个内置方法可用来在DOM元素中添加、删除或重新排列节点。其中最常用的方法之一是`appendChild()`，另一个则是`insertBefore()`。...
JavaScript驾驭网页-CSS与DOM
10-22
DOM（文档对象模型）是一种在网页中广泛使用的技术，它允许通过JavaScript来动态地访问和更新文档的内容、结构以及样式。DOM不仅支持对HTML文档的操纵，还包括XML文档，因此具有高度的灵活性和适用性。 在传统的...
innerHTML和outerHTML的区别
时清云的博客
07-05 1734
为什么要总结innerHTML和outerHTML的区别呢，主要是在看vue.js官方文档时，看到生命周期时 )] 原生的方法有点忘了，所以要重拾起来。 示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
outerHTML的兼容处理
BrightLD的博客
12-21 1779
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>outerHMTL的兼容处理</title> </head> <body> <div id="box" style="background:red;width:100px;height: 100px;"> <span>你好啊</span>
document节点和element节点的属性和操作
SORYUSHIKINAMI的博客
05-03 3061
JavaScript这门语言通过Document类型来表示文档。在浏览器中，**用document来表示整个HTML或者XML文档**。**document节点是文档的根节点，其它节点都是它的子节点**。只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。 document节点： - 子节点： 对于HTML文档来说，document对象一般有两个子节点。 1)第一个是docume...
innerHTML与outerHTML 的区别？
责任与担当
07-25 775
1.innerHTML <body> <p>你好</p> <div id="test"><h5>就是喜欢你</h5></div> <script type="text/javascript"> var hj=document.getElementById("test").innerHT...
JavaScript中innerHTML、outerHTML、innerText、outerText的用法与区别认识
johnchow2017的博客
04-25 3031
2017百度前端技术学院（js任务一） 一、JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？ 在JS中很容易将以上几者记错弄混，在网上找了解释也很抽象，如以下： innerHTML 设置或获取位于对象起始和结束标签内的 HTML  innerText 设置或获取位于对象起始和结束标签内的文
详解Element.scrollIntoView()
青颜的天空的博客
08-03 3341
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。 语法 element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIntoViewOptions); // Object型参数 参数 alignToTop 可选 一个Boolean值
聊天窗口内容滚动到底部的方法scrollTop和scrollIntoView
热门推荐
越思考越清晰
03-14 1万+
测试内容样式：&lt;style type="text/css"&gt; #container{ overflow-y:auto; overflow-x:hidden; height:150px; border:1px solid red; width:350px; } html,body{margin:0px;padding:0px;font...
javascript学习笔记——DOM扩展，InnerHTML属性、outerHTML属性、contains()方法
ass_ace
08-05 2655
1.querySelector()方法 接收css选择符，返回与该模式匹配的第一个元素，如果没有匹配元素则返回null； 通过document类型调用该方法则会在文档元素的范围内查找匹配元素； 通过Element类型调用该方法则则只会在该元素后代元素范围内查找匹配元素； document.querySelector("#myDiv"); 2.querySelectorAll()方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值