📃个人主页：「小杨」的csdn博客
🔥系列专栏：【JavaScript速成之路】
🐳希望大家多多支持🥰一起进步呀！
文章目录
小杨在上一篇带着大家一起学习了JavaScript中的内置对象，JavaScript基础的语法就结束了，下面我们将继续学习JavaScript中的DOM，希望大家通过阅读此文快速掌握DOM。
JavaScript语言由三部分组成，分别是ECMAScript，BOM和DOM，其中ECMAScript是JavaScript语言的核心，它的内容包括JavaScript基础语法，数组，函数，对象等；而Web API语法包括BOM和DOM。
1，API
API（应用程序编程接口）是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能。开发人员无须访问源码，无须理解其内部工作机制细节，只需知道使用即可。
2，Web API
Web API是主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用Web API。
文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C定义了一系列的DOM接口，利用DOM可完成对HTML文档内所有元素的获取，访问，标签属性和样式的设置等操作。
在实际开发中，诸如改变盒子的大小，标签栏的切换，购物车功能等带有交互效果的页面，都离不开DOM。
DOM中将HTML文档视为树结构，所以被称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
DOM中的专有名词：
在开发中，想要操作页面的某一部分（如控制一个div元素的显示或隐藏，修改元素div元素的内容），需要先获取该部分对应的元素，在对其进行操作。
getElementById()方法是由document对象提供的用于查找元素的方法。
该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素，则返回undefined。
需要特别注意，JavaScript中严格区分大小写，所以书写过程中一定要规范，否则程序会报错。
根据id获取元素语法格式：
document.getElementById('id');
通过一示例演示document.getElementById(‘id’)方法的使用：
<body>
<div id="box">你好！</div>
<script>
//使用getElementById()获取元素
var Obox = document.getElementById('box'); //通过id获取元素，并赋值给Obox
console.log(Obox); //打印获取元素
console.log(typeof Obox); //检测数据类型
console.dir(Obox); //打印返回的元素对象，更好查看里面的属性和方法
</script>
</body>
效果如下图：
根据标签名获取元素的方式有2种，分别是通过document对象获取元素和通过element对象获取元素。
根据标签获取元素语法格式：
//方法1：通过document对象获取元素
document.getElementsByTagName('标签名');
//方法2：通过element对象获取元素
element.getElementsByTagName('标签名');
document对象是从整个文档中查找元素。
element是元素对象的统称，通过元素对象可以查找该元素的子元素或后代元素，实现局部查找元素的效果。
由于相同标签的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。如果标签不存在，返回一个空的集合，不报错。
这个集合是一个类数组对象，或称为伪数组，它可以像数组一样通过索引访问元素，但不能使用push()等方法。
可以使用Array.isArray()方法来证明这个集合不是一个数组，而是一个伪数组。
通过具体代码演示通过document对象获取元素：
<body>
<ul>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
</ul>
<script>
//使用getElementsByTagName()获取元素
var lis = document.getElementsByTagName('li'); //通过标签名获取元素，并赋值给lis
console.log(lis); //打印获取的元素，返回的是获取过来的元素对象的集合，以伪代码的形式存储的
console.log(lis[0]); //打印lis里面的第一个元素
console.log('------------');
for(var i = 0; i < lis.length; i++){ //使用遍历的方式依次打印lis里面的元素对象
console.log(lis[i]);
}
</script>
</body>
效果如下图：
通过具体代码演示通过element对象获取元素的操作：
<body>
<ul>
<li>苹果</li><li>香蕉</li><li>葡萄</li><li>西瓜</li>
</ul>
<ol id="ol">
<li>红色</li><li>绿色</li><li>黄色</li><li>蓝色</li>
</ol>
<script>
//法1：
var ol = document.getElementsByTagName('ol'); //伪数组形式不可以作为父元素
console.log(ol[0].getElementsByTagName('li')); //父元素必须是单个对象(必须指明是哪一个元素)
//法2：
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
</body>
效果如下图：
通过name属性获取元素应使用document.getElementsByName(）方法，一般用于获取表单元素。
name属性的值不要求必须是唯一的，多个元素也可以有相同的名字，如表单中的单选框和复选框。
根据name获取元素的语法格式：
document.getElementsByName('name属性值');
通过以复选框为例演示根据name获取元素的操作：
<body>
<p>请选择你最喜欢的游戏（多选）</p>
<label for=""><input type ='checkbox' name = 'game' value = '王者'>王者荣耀</label>
<label for=""><input type ='checkbox' name = 'game' value = '和平'>和平精英</label>
<label for=""><input type ='checkbox' name = 'game' value = '炫斗'>QQ炫斗</label>
<script>
//getElementsByName()获取元素
var games = document.getElementsByName('game');
games[0].checked = true;
</script>
</body>
效果如下图：
HTML5中为document对象新增了getElementsByClassName()，querySelector()和querySelectorAll()方法，在使用时考虑兼容性问题。
1，根据类名获取
getElementsByClassName()方法，用于通过类名来获取某些元素的集合。
根据类名获取元素语法格式：
document.getElementsByClassName('类名');
下述对根据类名获取元素的操作进行演示：
<body>
<span class='one'>语文</span> <span class='two'>数学</span>
<span class='one'>化学</span> <span class='two'>英语</span>
<script>
//根据类名获取元素getElementsByClassName()
var Ospan1 = document.getElementsByClassName('one');
var Ospan2 = document.getElementsByClassName('two');
Ospan1[0].style.fontWeight = 'bold';
Ospan2[1].style.background = 'red';
</script>
</body>
效果如下图：
2，querySelector()和querySelectorAll()
下述对querySelector()和querySelectorAll()两种方法的使用进行演示：
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var firstBox = document.querySelector('.box');
console.log(firstBox); //获取class为box的第一个div
var list = document.querySelector('li');
console.log(list); //获取匹配到的第一个li
var nav = document.querySelector('#nav');
console.log(nav); //获取id为nav的第一个div
var allBox = document.querySelectorAll('.box');
console.log(allBox); //获取class为box的所有div
var lists = document.querySelectorAll('li');
console.log(lists); //获取匹配到的所有li
</script>
</body>
效果如下图：
| 属性 | 说明 |
|---|---|
| document.body | 返回文档的body元素 |
| document.title | 返回文档的title元素 |
| document.documentElement | 返回文档的html元素 |
| document.forms | 返回对文档所有的form对象的引用 |
| document.images | 返回对文档所有的image对象的引用 |
对document对象的属性操作进行演示：
<body>
<script>
var bodyElement = document.body;
console.log(bodyElement); //返回文档的body元素
var htmlElement = document.documentElement;
console.log(htmlElement); //返回文档的html元素
var titleElement = document.title;
console.log(titleElement); //返回文档的title元素
var fromElement = document.forms;
console.log(fromElement); //返回文档的form元素
var imageElement = document.image;
console.log(imageElement); //返回文档的image元素
</script>
</body>
效果如下图：
在开发中，JavaScript帮助开发者创建带有交互效果的页面，是依靠事件来实现的。
事件是指可以被JavaScript侦测到的行为，是一种“触发-响应”的机制。
这些行为指的是页面的加载，鼠标点击页面，鼠标指针滑过区域等具体操作动作，它对实现交互效果有很重要的作用。
事件由事件源，事件类型，事件处理程序3部分组成，又称事件三要素。
简便理解为：谁触发了事件，触发了什么事件，触发事件以后要做什么。
在开发中，为了元素在触发事件时执行特定的代码，需要为元素注册事件，绑定事件和处理函数。
具体步骤：首先获取元素，其次注册事件，最后编写事件处理代码。
通过演示为按钮绑定点击事件来演示事件的使用：
<body>
<button id="btn">单击有惊喜！！！</button>
<script>
//步骤1：获取事件源
var btn = document.getElementById('btn');
//步骤2：注册事件btn.onclick
btn.onclick = function(){
//步骤3：添加事件处理程序（采取函数赋值的方式）
alert('你上当了！！！');
}
</script>
</body>
效果如下图：
在JavaScript中，DOM操作可以改变网页内容，结构和样式。
在JavaScript中，想要操作元素内容，必须先获取到该元素。
| 属性 | 说明 |
|---|---|
| element.innerHTML | 设置或返回元素开始和结束标签之间的HTML，包括HTML标签，同时保留空格和换行 |
| element.innerText | 设置或返回元素的文本内容，在返回的时候会去除HTML标签和多余的空格，换行，在设置时会进行特殊字符转义 |
| element.textContent | 设置或返回指定节点的文本内容，同时保留空格和换行 |
分别使用innerHTML，innerText，textContent属性在控制台输出一段HTML文本：
<body>
<div>床前明月光</div>
<p>
疑是地上霜
<a href="">举头望明月</a>
</p>
<script>
//获取元素
var div = document.querySelector('div');
//通过innerText修改元素内容
div.innerText = '低头思故乡';
//获取元素
var p = document.querySelector('p');
//通过innerHTML打印元素内容
console.log(p.innerHTML);
//通过innerText打印元素内容
console.log(p.innerText);
//通过textContent打印元素内容
console.log(p.textContent);
</script>
</body>
效果如下图：
总结：
在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。
一个元素包含多个属性。例如，对于一个img图片来说，可以操作的属性有src，title等属性。
通过单击按钮操作img元素属性来演示操作元素的属性：
<body>
<button id="wz">王者独角兽</button>
<button id="sl">圣灵草王</button>
<br>
<img src="" alt="" >
<script>
//1,获取元素
var btn1 = document.getElementById('wz');
var btn2 = document.getElementById('sl');
var img = document.querySelector('img');
//2,注册事件
btn1.onclick = function(){
img.src = 'img1.png';
};
btn2.onclick = function(){
img.src = 'img2.png';
};
</script>
</body>
效果如下图：
操作元素样式的方法有两种方式，一是通过操作style属性，另外一种是通过操作className属性。
1，操作style属性
对于元素对象的样式，可以直接通过“元素对象.style.样式属性名’的方式操作。
样式属性名对应css样式名，但需要去掉css样式中的半字线"-"，并将半字线后面的英文的首字母大写。
例如，设置字体大小的样式名font-size，对应的样式属性名为fontSize…
常见style属性中CSS样式名称：
| 名称 | 说明 |
|---|---|
| background | 设置或返回元素的背景属性 |
| backgroundColor | 设置或返回元素的背景色 |
| display | 设置或返回元素的显示类型 |
| fontSize | 设置或返回元素的字体大小 |
| height | 设置或返回元素的高度 |
| left | 设置或返回定位元素的左部位置 |
| listStyleType | 设置或返回列表项标记的类型 |
| overflow | 设置或返回如何处理呈现在元素框外的内容 |
| textAlign | 设置或返回文本的水平对齐方式 |
| textDecoration | 设置或返回文本的修饰 |
| textIndex | 设置或返回文本第一行的缩进 |
| transform | 向元素应用2D或3D转换 |
通过对元素样式的添加来演示如何采取style属性来操作元素样式：
<style>
div{
background-color: red;
}
</style>
<body>
<div id="box"></div>
<script>
//操作style属性操作元素样式
//1,获取元素对象
var box = document.querySelector('#box');
//添加元素对象的样式width，height
box.style.width = '100px';
box.style.height = '100px';
//修改元素对象的样式backgroundColor
box.style.backgroundColor = 'yellow';
</script>
</body>
效果如下图：
2，操作className属性
在开发中，如果样式修改较多，可以采取操作类名的方式更改元素样式，语法为“对象.className”。
访问className属性的值表示获取元素的类名，为className属性赋值表示更改元素类名。
如果元素有多个类名，在className中以空格分隔。
如何使用className更改元素的样式？
1）编写html结构代码
2）单击div元素更改元素的样式
3）在style中添加一个charge类
4）单击div盒子，查看效果
通过具体代码演示通过使用className更改元素的样式的操作：
<style>
div{
width:200px;
height:200px;
background-color: red;
}
.charge{
width:400px;
height:400px;
background-color: pink;
}
</style>
<body>
<div class="one">文本内容</div>
<script>
var test = document.querySelector('div');
test.onclick = function(){
this.className = 'charge';
}
</script>
</body>
效果如下图：
在HTML中，元素可被划分为2类，即内置属性和自定义属性。
在DOM中，内置属性值的获取可以使用elememt.属性 ，而自定义属性的获取却不能直接使用该语法。
那么如何对自定义属性进行获取呢？ 在DOM中，自定义属性的获取可以使用element.getAttribute('属性')。
通过具体代码演示属性值获取的操作：
<body>
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('div');
//获取元素的属性值法1：element.属性 获取内置属性值(元素本身自带的属性) index为自定义属性 故无法获取
console.log(div.id);
console.log(div.index);
//获取元素的属性值法2：element.getAttribute('属性') 只要获取自定义属性(标准) 我们自己自定义的属性称为自定义属性
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
</script>
</body>
示例效果:
在DOM中，内置属性值的设置可以使用elememt.属性 = 属性值 的方式，而自定义属性的获取却不能直接使用该语法。
那么如何对自定义属性进行设置呢？ 在DOM中，自定义属性的设置可以使用element.setAttribute('属性')。
通过具体代码演示内置属性值设置的操作：
<body>
<div></div>
<script>
div = document.querySelector('div');
//设置元素的属性值法1：element.属性 = '值' 针对内置属性(标准)
div.id = 'demo1';
div.className = 'nav';
div.index = '1';
</script>
</body>
示例效果：
通过具体代码演示自定义属性值设置的操作：
<body>
<div></div>
<script>
div = document.querySelector('div');
//设置元素的属性值法2：element.setAttribute('属性','值') 主要针对自定义属性(标准)
div.setAttribute('index','2');
div.setAttribute('class','footer');
</script>
</body>
示例效果：
在DOM中，内置属性和自定义属性的值移除都是通过element.removeAttribute('属性') 的方式。
通过具体代码演示属性值移除的操作：
<body>
<div id="demo" class="nav" index="2"></div>
<script>
var div = document.querySelector('div');
div.removeAttribute('id');
div.removeAttribute('class');
div.removeAttribute('index');
</script>
</body>
示例效果：
一般自定义属性可以通过getAttribute('属性') 方法来获取。
但有些自定义的属性很容易引起歧义，难以判断其是内置属性还是自定义属性。
因此，HTML5新增了自定义属性的规范，通过data-属性名 的方式来进行自定义属性的设置。
元素的data-属性名 自定义属性的设置有2种方式，即在HTML中设置和在JavaScript中设置的两种方式。
1，在HTML中设置自定义属性
<body>
<div data-index="2"></div>
</body>
2，在JavaScript中设置自定义属性
在JavaScript中，设置自定义属性的方式有两种，
元素对象.dataset.属性名='属性值'元素对象.setAttribute('属性'，属性值)<body>
<div></div>
<script>
var div = document.querySelector('div');
div.dataset.index = '2';
div.setAttribute('data-name','anna');
</script>
</body>
在DOM中，自定义属性的属性值的获取方式有2种。
元素对象.getAttribute('属性') ，该方法可以获取内置属性或者自定义属性，无兼容性问题，推荐使用。元素对象.dataset('属性')或者元素对象.dataset['属性'] ，有兼容性问题，从IE 11 才支持使用，不推荐使用。如果自定义属性里面包含有多个连字符（-）时，获取的时候采用驼峰命名法。
HTML5新增的获取自定义属性的方法，只能只能获取以data-开头的自定义属性。
<body>
<div getTim="20" data-index="2" data-list-name="anna"></div>
<script>
var div = document.querySelector('div');
// 方式1：通过`元素对象.getAttribute('属性')`获取属性值
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// 方式2：通过HTML5新增的方式来获取属性值，只能获取以data-开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
</body>
效果如下：
这就是本期博客的全部内容啦，想必大家已经对Javascript中的DOM的相关内容有了全新地认识和理解吧，如果有什么其他的问题无法自己解决，可以在评论区留言哦！
最后，如果你觉得这篇文章写的还不错的话或者有所收获的话，麻烦小伙伴们动动你们的小手，给个三连呗（点赞👍，评论✍，收藏📖），多多支持一下！各位的支持是我最大的动力，后期不断更新优质的内容来帮助大家，一起进步。那我们下期见！
1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，
Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug，发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则：20%的主要功能要重点测（eg：支付宝的支付功能，其他功能都是次要的）80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功
ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
（本文是网络的宏观的概念铺垫）目录计算机网络背景网络发展认识"协议"网络协议初识协议分层OSI七层模型TCP/IP五层(或四层)模型报头以太网碰撞路由器IP地址和MAC地址IP地址与MAC地址总结IP地址MAC地址计算机网络背景网络发展 是最开始先有的计算机，计算机后来因为多项技术的水平升高，逐渐的计算机变的小型化、高效化。后来因为计算机其本身的计算能力比较的快速：独立模式：计算机之间相互独立。 如：有三个人，每个人做的不同的事物，但是是需要协作的完成。 而这三个人所做的事是需要进行协作的，然而刚开始因为每一台计算机之间都是互相独立的。所以前面的人处理完了就需要将数据
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如
这是一个研究案例:......我正在尝试使用WatirRuby的API引用名为“bar”的嵌入元素。该元素由Chrome的DOM检查器显示，但我无法使用Watir的任何查找方法找到它:browser.embeds()#onlyisfoundbrowser.html.include?'bar'#=>false为什么会这样？为什么Watir不显示完整的HTML？如果我有不同框架中的元素或由Javascript初始化函数动态插入的元素，是否可以使用Watir访问它们？谢谢 最佳答案 如果元素在框架中，你必须使用这样的东西:browser.
出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=