DOM、BOM、Es6标准

文章目录 一、DOMDOM简介获取元素事件基础 *** 作元素节点 *** 作 二、BOMwindow对象常见事件定时器JS执行队列location对象navigator对象history对象 三、Es6标准JavaScript letJavaScript const指数运算符默认参数值Array.find()Array.findIndex()isFinite() 方法isNaN() 方法箭头函数（Arrow Function）

一、DOM DOM简介

DOM（Document Object Model——文档对象模型），是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。

DOM树

文档：一个页面就是一个文档，DOM中使用document表示。元素：页面中的所有标签都是元素，DOM中使用element表示。节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。DOM把以上内容都看作对象 获取元素

根据ID获取元素
使用getElementByld()方法获取带有ID的元素对象

语法：

var element = document.getElementById(id);

参数：

element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null。id是大小写敏感的字符串，代表了所要查找的元素的唯一ID。

返回值：

返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。

示例：

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

根据标签名获取元素
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

语法：

var elements = document.getElementsByTagName(name);

参数：

element是一个由发现的元素出现在树中的顺序构成的动态的HTML集合 HTMLCollection。name 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。

返回值：

获取过来元素对象的集合，以伪数组的形式储存。

示例：

<p>Hello World!</p>
<p><b>getElementsByTagName</b> 方法</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'第二段中的文本是：' + x[1].innerHTML;
</script>

根据类名获取元素
使用getElementsByClassName方法可以根据类名获取元素对象。

语法：

var elements = document.getElementsByClassName(names);

参数：

element是一个实时集合，包含了找到的所有元素。names 是一个字符串，表示要匹配的类名列表；类名通过空格分隔。getElementsByClassName 可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素。

返回值：

返回一个包含了所有指定类名的子元素的类数组对象。

示例：

<p class="intro">DOM</p>
<p class="intro"> <b>getElementsByClassName</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'class ="intro" 的第一段：' + x[0].innerHTML;
</script>

法2：使用querySelectorAll 方法可以按查询选择器查找 HTML 元素。（效果同上）

语法：

elementList = parentNode.querySelectorAll(selectors);

参数：

选择器需要加符号，例.box #nav如果指定的 选择器 不合法，会抛出错误。如$(“##div”)

返回值：

返回指定选择器的所有元素对象集合。

示例：

<p class="intro">DOM </p>
<p class="intro"> <b>querySelectorAll</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'class ="intro" 的第一段' + x[0].innerHTML;
</script>

获取body元素
document.body返回的是body对象。
获取html元素
document.documentLiement返回html元素对象

事件基础

JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。

事件的三要素

事件源 事件被触发的对象

事件类型 事件触发机制（鼠标点击onclick/鼠标经过onmouseover/键盘按下onkeydown）

事件处理程序 通过一个函数赋值的方式完成

执行事件步骤

获取事件源注册事件（绑定事件）添加事件处理程序（采取函数赋值形式）

常见的鼠标事件

事件	触发条件
onfocus	获得鼠标焦点
onblur	失去鼠标焦点
onclick	点击左键
onmouseover	鼠标经过
onmouseout	鼠标移开
onmousedown	鼠标按下
onmouseup	鼠标d起

示例：

<h1 onclick="changeText(this)">请点击这里！</h1>
<script>
function changeText(id) {
  id.innerHTML = "谢谢！";
}
</script>

*** 作元素

JavaScript 的DOM *** 作能改变网页内容、结构、样式。
DOM *** 作能改变元素中的内容、属性等。

改变元素内容
Element.innerText 属性(不识别html标签，去除空格和换行）

var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function (){
    div.innerText = '2022-5-20'
}

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。（效果同上）

var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function (){
    div.innerHTML = '2022-5-20'
}

常用元素属性 *** 作

src、href、title、alt等

var ldh = document.getElementByld('ldh');
var zxy = document.getElementByld('zxy');
var img = document.querySelector('img');
zxy.onclick = function(){
    img.src = 'image/zxy.ipg';
}
ldh.onclick = function(){
    img.src = 'image/ldh.ipg';
}

表单元素属性 *** 作

type、value、checked、selected、disabled

var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function (){
    input.value = '被点击了';
    btn.disabled = true;
}

样式属性 *** 作
element.style 行内样式 *** 作

var div = document.querySelector('div');
div.onclick = function (){
    this.style.backgroundColor = 'purple';
}

样式采用驼峰命名法产生的是行内样式，CSS权重比较高

element.className 类名样式 *** 作

var div = document.querySelector('div');
div.onclick = function (){
    this.className = 'change';
}

自定义属性 *** 作

div.getAttribute('index'); //获取自定义属性

div.setAttribute('index',2);//设置自定义属性

div.removeAttribute('index');//移除自定义属性

<div data-index=''></div>//自定义属性命名

节点 *** 作

网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。

一般地，节点至少有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）三个基本属性。

元素节点 nodeType为 1（主要）属性节点 nodeType为 2文字节点 nodeType为 3（文本节点包括文字、空格、换行等）

节点层级

1.父级节点（parentNode）

var div = document.querySelector('.div');
console.log(div.parentNode);

返回最近一个父节点，如果没有返回null

2.子节点（childNodes）

var ul = document.querySelector('ul');
console.log(ul.childNode);

返回值里包含了所有子节点包括元素节点，文本节点，parentNode.children只得到元素节点parentNode.firstchild获取第一个子元素（包括文本节点和元素节点）parentNode.lastchild获取最后一个子元素（包括文本节点和元素节点）parentNode.firstElementchild获取第一个子元素（只有元素节点）parentNode.lastElementchild获取最后一个子元素（只有元素节点）

3.兄弟节点

node.nextSibling下一个兄弟关系的节点（包括文本和元素）node.previousSibling上一个兄弟关系的节点（包括文本和元素）node.nextElementSibling下一个兄弟关系的节点（只有元素节点）node.previousElementSibling上一个兄弟关系的节点（只有元素节点）

创建节点

document.createElement(‘tagName’);

添加节点(在后面）

node.appendChild(child);

添加节点(在前面）

node.insertBefore(child,指定元素)；

<div id="div1">
<p id="p1">这是一段文字。</p>
<p id="p2">这是另一段文字。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新的文本。");
para.appendChild(node);
var element = document.getElementById("div1");
//法一
element.appendChild(para);
//法二
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>

删除节点

node.removeChild(child)

var ul = document.querySelector('ul');
ul.removeChild(ul.children[0]);

复制节点

node.cloneNode()

var ul = document.querySelector('ul');
var lili = ul.children[0].cloneNode(ture);
ul.appendChild(lili);

括号参数为空或false，只复制标签，不复制里面的内容括号参数为true，复制标签，复制里面的内容 二、BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，核心对象为window。

不存在浏览器对象模型（BOM）的官方标准。 window对象常见事件

1.窗口加载事件

window.onload = function () { }
或者
window.addEventListener(‘load’,function () { } );

第一种写法只能写一次，以最后一个为准

2.调整窗口大小事件

window.onresize = function () { }
或者
window.addEventListener(‘resize’,function () { } );

窗口大小变化即触发

window.addEventListener('resize',function() { 
if(window.innerWidth<=800)
{
div.style.display='none';
}
});

定时器

1.setTimeout()定时器

window.setTimeout ( 调用函数，[延迟的毫秒数] ) ;

window.setTimeout() 方法可以不带 window 前缀来编写。第一个参数是要执行的函数。第二个参数指示执行之前的毫秒数，不写默认为0。

<button onclick="setTimeout(myFunction, 3000);">点击</button>
<script>
function myFunction() {
  alert('Hello');
}
</script>

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

window.clearTimeout(timeoutID)

<button onclick="clearTimeout(myFunction)">停止</button>

window.clearTimeout() 方法可以不带 window 前缀来写。clearTimeout() 使用从 setTimeout() 返回的变量

2.setInterval()定时器

setInterval() 方法在每个给定的时间间隔重复给定的函数。

window.setInterval ( 调用函数，[延迟的毫秒数] ) ;

window.setInterval() 方法可以不带 window 前缀来编写。第一个参数是要执行的函数。第二个参数每个执行之间的时间间隔的长度。

<p id="demo"></p>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
  var d = new Date();  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

clearInterval() 方法停止执行 setInterval() 中规定的函数。

window.clearInterval(timeoutID)

<button onclick="clearInterval(myVar)">停止时间</button>

定时器名字要定义全局变量 JS执行队列

JS语言是单线程的，也就是说同一个时间只能做一件事。

同步：按排列顺序依次执行。异步：同时进行多个任务。同步任务：在主线程上执行，形成一个执行栈。异步任务：通过回调函数实现。异步任务放到任务队列中（消息队列）执行。

一般而言，异步函数主要分为以下三类：

普通事件：如，click,resize等。资源加载：如，load,error等。定时器：如，setInterval,setTimeout等。

JS执行机制：

1.先执行执行栈中的同步任务。
2.遇到异步任务就放到任务队列中。
3.一旦执行栈中的所有同步任务完成，就会读取任务队列中的异步任务，于是这些异步任务就结束等待状态，进入执行栈，开始执行。

location对象

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

window.location 对象可不带 window 前缀书写。

URL（Uniform Resource Locator）是互联网上的标准资源地址，互联网上每个文件都有一个唯一的URL。它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL一般语法格式：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

location对象属性 ：

location对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机(域名)
location.pathname	返回当前页面的路径名
location.port	返回端口号 若未写返回空字符串
location.search	返回参数
location.hash	返回片段

location对象方法

location对象方法	返回值
location.assign()	跟href一样,可跳转页面
location.replace()	替换当前页面
location.reload()	重新加载页面

navigator对象

navigator对象包含有关浏览器的信息,它有很多属性,常用的是userAgent,该属性可以返回由用户机发送服务器的user-agent头部的值.

history对象

window.history 对象包含浏览器历史。

history对象方法:

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能 正为前进负为后退

示例:

<html>
<head>
<script>
function goBack() {
    window.history.back()
 }
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>

三、Es6标准

ECMAScript 6 也称为 ES6 和 ECMAScript 2015。一些人把它称作 JavaScript 6。

JavaScript let

let 语句允许您使用块作用域声明变量。

var  x = 10;
{  
  let x = 2;
}
document.getElementById("demo").innerHTML = x;

JavaScript const

const 语句允许您声明常量（具有常量值的 JavaScript 变量）。

常量类似于 let 变量，但不能更改值。

var  x = 10;
{  
  const x = 2;
}
document.getElementById("demo").innerHTML = x;

指数运算符

取幂运算符（**）将第一个 *** 作数提升到第二个 *** 作数的幂。

x ** y 等价于 Math.pow(x,y)

var x = 5;
document.getElementById("demo").innerHTML = x ** 2;

默认参数值

ES6 允许函数参数具有默认值。

此函数接受 3 个参数：

项目值项目索引数组本身 Array.find()

find() 方法返回通过测试函数的第一个数组元素的值。

Array.findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

isFinite() 方法

如果参数为 Infinity 或 NaN，则全局 isFinite() 方法返回 false,否则返回 true.

document.getElementById("demo").innerHTML =
isFinite(10 / 0) + "
" + isFinite(10 / 1);

isNaN() 方法

如果参数是 NaN，则全局 isNaN() 方法返回 true,否则返回 false.

document.getElementById("demo").innerHTML =
isNaN("Hello") + "
" + isNaN("10");

箭头函数（Arrow Function）

箭头函数允许使用简短的语法来编写函数表达式。

不需要 function 关键字、return 关键字以及花括号。箭头功能没有自己的 this。它们不适合定义对象方法。箭头功能未被提升。它们必须在使用前进行定义。使用 const 比使用 var 更安全，因为函数表达式始终是常量值。如果函数是单个语句，则只能省略 return 关键字和花括号。

const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);