DOM扩展的那些事儿

最新推荐文章于 2022-12-08 23:53:37 发布
最新推荐文章于 2022-12-08 23:53:37 发布
阅读量194 收藏
点赞数
分类专栏： 前端 文章标签： 扩展 dom scrollInto insertAdja classList
本文为博主原创文章，转载请注明出处。
本文链接：https://blog.csdn.net/m0_37568521/article/details/78525540
版权
前言：关于DOM的扩展，之前自己也接触了一些，但是没有系统的去看，这次有机会系统的学习JavaScript，所以就把这些知识好好的总结一下。
1、选择符的扩展

在没有扩展之前，我们在进行元素选择之前，使用最广泛的就是

document.getElementById()

但是在扩展以后，我们在进行元素选择的时候方便了很多，关于选择符一共扩展了三个方法

document.querySelector()
document.querySelectorAll()
document.getElementsByClassName()//看书才知道这也是DOM扩展的内容（尴尬）

自己平时用的最多的就是下面这样

document.querySelector("#content");
或者
document.querySelector(".container");

但是关于这个方法的魅力远远不只是这个简单，我们在css中可以怎么选择元素，这里就可以这样选择，什么意思呢，通过下面的例子来说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
</head>
<body>
    <ul class="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        window.onload = function() {
            var oUl = document.querySelector(".ul");
            var oLi = oUl.querySelector("li:first-child");
            console.log(oLi);//结果为<li>1</li>
        }
    </script>
</body>
</html>

感受到这个方法的强大了吧，关于CSS的选择符，自己之前总结过一篇文章，感兴趣的伙伴可以看看CSS选择器总结


关于querySelectorAll()也是一样的，只是返回的结果是NodeList。


对于getElementsByClassName()我们可以传入多个class名称，返回结果如果是多个也是NodeList

2、元素遍历的扩展

不知道还记不记得我们之前在遍历元素的时候，经常使用nextSibling，firstChild。我们经常要考虑到文本节点，弄得很烦恼。现在终于有了一些方法不用考虑到文本节点了，只是考虑文档节点，看看下面例子就明白了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
</head>
<body>
    <ul class="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        window.onload = function() {
            var oUl = document.querySelector(".ul");
            // 获取子元素的个数
            console.log(oUl.childElementCount);//结果为3
            // 返回第一个子元素
            console.log(oUl.firstElementChild);
            // 返回最后一个元素
            console.log(oUl.lastElementChild);
            // 获取同辈的下一个元素
            console.log(oUl.firstElementChild.nextElementSibling);
            // 获取同辈的上一个元素
            console.log(oUl.lastElementChild.previousElementSibling);
        }
    </script>
</body>
</html>
2、了不起的classList属性

关于这个属性的出现，真得好处多多啊，进行类名操作的时候只需要调用一个属性即可。下面进行简单对比
正常情况下，我们要增加一个元素的类名是下面这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
    <style>
        .red-color {
            color: red;
        }
        .bg-gray {
            background-color: gray;
        }
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <ul class="red-color bg-gray">
        xiaoD
    </ul>
    <script>
        window.onload = function() {
            var oUl = document.getElementsByTagName("ul")[0];
            var classNames = oUl.className.split(/\s+/);
            classNames.splice(0,0,'center');
            oUl.className = classNames.join(" ");
        }
    </script>
</body>
</html>

但是我们又了classList属性的时候，我们就可以对上面的操作秒杀。classList主要有四个方法

add 如果已经存在值了，就不会增加，如果不存在就增加
contains 判断是否存在该值
remove 删除值
toggle 如果存在就删除，如果不存在就增加，就是逆向而行

具体例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
    <style>
        .red-color {
            color: red;
        }
        .bg-gray {
            background-color: gray;
        }
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <ul class="red-color bg-gray">
        xiaoD
    </ul>
    <script>
        window.onload = function() {
            var oUl = document.getElementsByTagName("ul")[0];
            oUl.classList.add('center');
            oUl.classList.remove('bg-gray');
            console.log(oUl.classList.contains('red-color'));//结果为true
            oUl.classList.toggle("bg-gray");
        }
    </script>
</body>
</html>
3、焦点管理

通过document.activeElement获取当前或者焦点的元素
通过document.hasFocus()判断文档是否获取到了焦点，通过该方法我们可以知道用户是不是正在和页面进行交互，因为只要用户的鼠标在document中，返回的值都是true

4、readyState

通过document.readyState判断页面是否已经加载完成，如果加载完成则为complete

5、outerHTML

我们都知道innerHTML，但是这里却出现了一个outerHTML，先看一下下面的例子，在进行解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
    <style>
        p.red {
            color: red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <script>
        window.onload = function() {
            var oDiv = document.getElementById("div1");
            oDiv.outerHTML = "<p class='red'>123</p>";
        }
    </script>
</body>
</html>

我们通过上面的操作，再看elment中的元素，发现div不见了，只有一个p标签。对，你没有看多，这就是outerHTML，其实质就是

var p = document.createElement("p");
p.appendChild(document.createTextNode("welcome"));
oDiv.parentNode.replaceChild(p, oDiv);
6、insertAdjacentHTML

这个方法有两个参数，使用方法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
</head>
<body>
    <div id="div1">
        <p class="list">1</p>
    </div>
    <script>
        window.onload = function() {
            var oDiv = document.querySelector("#div1");
            // 作为同辈元素插入在oDiv之前
            oDiv.insertAdjacentHTML("beforebegin", "<p>0</p>");
            // 作为同辈元素插入在oDiv之后
            oDiv.insertAdjacentHTML("afterend", "<p>2</p>");
            // 作为第一个子元素插入
            oDiv.insertAdjacentHTML("afterbegin", "<p>1.1</p>");
            // 作为最后一个子元素插入
            oDiv.insertAdjacentHTML("beforeend", "<p>1.2</p>");
        }
    </script>
</body>
</html>

我们来看看结构图就清楚了
这里写图片描述

7、scrollIntoView

可以取值为true和false。如果是true则是容器的上边框和页面的顶部对齐，如果是false则是容器的下边框和页面的底部对齐，但是这是有条件的，就是当页面的可视区高度小于容器的高度。如果容器的可视区的高度大于容器的高度，那么不管设置为false，还是true都是和页面的底部对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            margin-top: 3000px;
            border: 1px solid red;
        }
        .content {
            width: 300px;
            height: 2000px;
        }
    </style>
</head>
<body>
    <button id="btn">向上</button>
    <div class="content">welcome</div>
    <script>
        window.onload = function() {
            var oBtn = document.getElementById("btn");
            var oContent = document.querySelector(".content");
            oBtn.onclick = function() {
                oContent.scrollIntoView(true);
            }
        }
    </script>
</body>
</html>

（完，写于2017/11/14 0:46）

输出是最好的学习
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[JS-DOM BOM学习笔记]DOM那些儿事儿
あなたの可愛い41
04-23 269
DOM那些儿事儿DOM简介DOM树获取元素根据ID获取根据标签名获取H5新增获取元素方式获取特殊元素(body，html)事件基础常见的鼠标事件操作元素改变元素内容innerText和innerHTML的区别常用元素的属性操作表单元素的属性操作样式属性操作使用className修改样式属性案例仿京东显示隐藏密码明文案例仿淘宝关闭二维码案例循环精灵图显示隐藏文本框内容密码框验证信息 DOM简介 文档对象模型，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。 W3C已经定义了一系列的D
DOM LEVEL 1 中的那些事儿[下]
每天进步一点点
01-06 99
本文承接：DOM LEVEL 1 中的那些事儿[上]   2.3 Element类型 Element类型应该是Document类型之外使用的最多的节点类型了，Element代表XML或HTML文档中的一个元素，它具有以下特征： [1]nodeType为1 [2]nodeName为标签名 [3]nodeValue为null [4]parentNode可能是Element或Doc...
DOM LEVEL 1 中的那些事儿[上]
每天进步一点点
01-05 89
DOM是前端编程中一个非常重要的部分，我们在动态修改页面的样式、内容、添加页面动画以及为页面元素绑定事件时，本质都是在操作DOM。DOM并不是JS语言的一个部分，我们通过JAVA、PHP等语言抓取网页内容时需要对网页进行解析并拿到我们感兴趣的那部分内容，这时其实也是在操作DOM。当然在前端领域，我们肯定还是通过JS来操作DOM，而DOM也是伴随JS的出现而诞生的，随着前端的不断发展，DOM标准也...
关于web woker那些事儿
最新发布
weixin_42582488的博客
12-08 1540
web worker iframe框架通信之share worker 多线程
DOM LEVEL 1 中的那些事儿[总结篇-下]
每天进步一点点
01-06 560
DOM是前端编程中一个非常重要的部分，我们在动态修改页面的样式、内容、添加页面动画以及为页面元素绑定事件时，本质都是在操作DOM。DOM并不是JS语言的一个部分，我们通过JAVA、PHP等语言抓取网页内容时需要对网页进行解析并拿到我们感兴趣的那部分内容，这时其实也是在操作DOM。当然在前端领域，我们肯定还是通过JS来操作DOM，而DOM也是伴随JS的出现而诞生的，随着前端的不断发展，DOM标准也在不断演进，每个新的版本都为DOM进行了一定程度的扩展。本文主要总结DOM1级中的核心内容。
PHP的那些事儿
GJ_rabbit的博客
07-07 280
那些年被问的php干货，主要是针对常用数组，socket编程函数，类，防范攻击等的常遇问题
DOM LEVEL 1 中的那些事儿[总结篇-上]
每天进步一点点
01-05 1778
DOM是前端编程中一个非常重要的部分，我们在动态修改页面的样式、内容、添加页面动画以及为页面元素绑定事件时，本质都是在操作DOM。DOM并不是JS语言的一个部分，我们通过JAVA、PHP等语言抓取网页内容时需要对网页进行解析并拿到我们感兴趣的那部分内容，这时其实也是在操作DOM。当然在前端领域，我们肯定还是通过JS来操作DOM，而DOM也是伴随JS的出现而诞生的，随着前端的不断发展，DOM标准也在不断演进，每个新的版本都为DOM进行了一定程度的扩展。本文主要总结DOM1级中的核心内容。
浏览器那些事儿
零度flying
05-02 138
https://www.jianshu.com/p/f4bf35898719
Javascript DOM （一）
liuzhe的博客
08-07 467
从JavaScript DOM最基础开始，最详细讲解，让你理解DOM。 内容笔记重点全文不水字数。
javascript 兼容所有浏览器的DOM扩展功能
10-28
技术文章写得少，所以有时候想写点什么却下不了手，不知道该写什么；往往到了准备要写的时候才发现自己想写的东西其实很无聊，甚至觉得很幼稚，于是又关掉了编缉器
php使用自带dom扩展进行元素匹配的原理解析
12-17
php提供了非常好用的解析html和xml文档的扩展库DOM，使用这个库可以非常高效的进行html和xml文档的解析，它的原理就是通过寻找首尾匹配对来进行文档的解析。 从上面的分析可以看出，如果首位不匹配，可能就会导致...
获取DOM对象的几种扩展及简写
12-07
参照prototype.js中getElementsByClassName的思想，扩展出几种在DEOM操作中可经常用到的获取对象的方法，使用获取对象变得更方便、更精确了： document.getElementsByClassName = function(className,oBox) { //...
JavaScript DOM 学习第七章 表单的扩展
10-29
一章我会处理一个简单的W3C DOM脚本。他会帮助我们从一个新的角度来看待交互设计。
利用vedio播放视频和原生js对其进行控制
热门推荐
wd
07-01 2万+
直接上代码： Document #durationbar{ width: 500px; height: 20px; } #durationbar progress{ width: 100%; height: 100%; } 开始 停止 暂停 2倍速度 window.onload
移动端使用touchstart，touchmove，touchend实现图片轮播
wd
09-04 1万+
移动端基础事件介绍touchstart //手指触碰屏幕touchmove //手指在屏幕上滑动touchend //手指离开屏幕移动端页面滑动图片滚动是再正常不过的事情了，这次碰巧写到这样一个滚动，就把代码放出来分享一下。首先做的是一个没有经过函数封装的单纯的滑屏轮播<!DOCTYPE html> <html lang="en"> <head> <meta chars
html5中input的新类型（验证只有在点击提交按钮的时候才触发）
wd
07-13 9742
1.email，关于电子邮件是否合法，我们以前通常会在js脚本中写一个复杂的正则表达式来验证，但是现在不用了，类型为email的input控件可以自动帮助我们完成，用法如下： Document 如果输入不合格，则出现下面代码： 2.url，我们需要判断输入的是否是一个合法的网址，以前也是通过在js脚本中写一堆复杂的正则表达式，现
用CSS3实现响应式的瀑布流
wd
11-09 8853
前言：虽然瀑布流在现在不是很流行了，自己之前通过JavaScript和css3都实现过。这次做项目的时候又遇到了这个问题，就重新整理了一下，并把代码放出来分享一下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wate
IE浏览器弹出一个安全警告，“允许阻止的内容”
wd
06-30 7335
对于使用IE浏览器的用户，如果点击阻止，那么你的界面js都不能够加载出来了，后果自己想象，并且这个也会给用户不好的体验。 如下图： 解决办法： 在meta下面加上这一条注释就可以完美解决了。 具体原因，根据书上的介绍为告诉IE将页面视为从远程网站上下载下来的，否则，IE会切换到一种锁定模式，弹出一个安全警告。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值