01 DOM
# 1. Web Api 和 Js 基础关联性 #
## 1.1 js组成 ##
javaScript 组成 ECMAScript DOM（页面文档对象模型） BOM（浏览器对象模型）
ECMAScript（目前学习js基础语法）
DOM BOM （web Api）
## 1.2 js 基础阶段 以为 web api阶段 ##
> js基础阶段
只学习基本语法，做不了常用的网页交互效果
> web Api
是js独有的部分，主要学习页面交互
## 2.API 与 web Api ##
## 2.1 APi ##
API:应用程序编程接口，预先定义的函数，提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，无需访问源码，或理解内部工作的细节
简单理解：API给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
## 2.2 web Api ##
web APi是浏览器提供的一套操作浏览器功能和页面元素的APi(BOM 和 DOM)
主要针对浏览器讲解最常用的APi,针对交互效果
web APi很多 所以将这个阶段称为Web Apis
web api一般都有输入和输出（函数的传参和返回值），web Api很多都是方法（函数）
# 3. DOM #
## 3.1 什么是DOM ##
文档对象模型，w3c组织推荐的处理可扩展标记语言（HTML 或 XMl）的标准编程接口
w3c已经定义了一系列的dom接口，通过接口更改网页的内容样式
文档：一个页面即是一个文档，dom中使用document表示
元素：页面中的所有标签都是元素 dom 中用element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释）dom中使用node表示
## 3.2 如何获取页面元素 ##
>根据ID获取
根据getElementByld()方法获取带有ID的元素对象
document.getElementById('id');
演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id='time'>2019-9-9</div> <script> // 1.因为文档页面从上往下加载所以 script写在后面 // 2.get 获得 element 元素 by 通过 驼峰命名法 // 3.返回的是一个匹配到ID的DOM element对象，若没有则返回null var timer = document.getElementById('time') console.log(timer) // 打印我们返回的元素对象 console.dir(timer) </script> </body> </html>
> 根据标签名获取
document.getElementsByTagName(标签名) 演示 <body> <ul> <li>111111111111</li> <li>111111111111</li> <li>111111111111</li> <li>111111111111</li> <li>111111111111</li> </ul> <ul id="nav"> <li>222</li> <li>222</li> <li>222</li> <li>222</li> <li>222</li> </ul> <script> // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储 var lis = document.getElementsByTagName('li') console.log(lis); console.log(lis[0]); // 2.依次打印 可以用遍历 for (var i = 0; i < lis.length; i++) { console.log(lis[i]); } // 3.element.getElementByTagName() 可以得到这个元素里面某些标签 var nav = document.getElementById('nav') // 获得 nav元素 var navlis = nav.getElementsByTagName('li') console.log(navlis); </script> </body>
>通过HTML5新增方法获取
<body> <div class="box"></div> <div class="box"></div> <div id="nav"> <ul> <li>首页</li> </ul> </div> <script> // 1.document.getElementsByClassName() 根据类名获得某些元素集合 var box = document.getElementsByClassName('box') console.log(box); // 2.document.querySelector('选择器') 返回指定选择器的第一个元素对象 括号里需要加符号 类是. ID是# var firstbox = document.querySelector('.box') console.log(firstbox); var nav = document.querySelector('#nav') var li = document.querySelector('li') console.log(li); // 3. document.querySelectorAll('选择器') 指定选择器所有对象 var allBox = document.querySelectorAll('.box') console.log(allBox); </script> </body>
>特殊元素获取
<body> <script> //1. document.body 获取body元素 var bodyEle = document.body; console.log(bodyEle); console.dir(bodyEle); //2.获取html元素 var htmlEle = document.documentElement; console.log(htmlEle); </script> </body>
# 4.事件 基础 #
js可以创建动态页面，时间可以被js侦测到的行为
简单理解：触发 -- 相应机制
网页中每个元素都可产生一些触发js的时间，比如用户点击某按钮产生一个事件，然后去执行某些操作
## 4.1 执行事件的步骤 ##
1、获取事件源
2、注册事件（绑定事件）
3、添加事件处理程序（采取函数赋值形式）
<body> <button id="btn">水井</button> <script> // 点击一个按钮，弹出对话框 // 1.事件由三部分组成：事件源、事件类型、事件处理程序 也称为事件三要素 // 事件源：事件被触发的对象 谁 按钮 var btn = document.getElementById('btn') // 事件类型 如何触发 什么事件 鼠标点击onclick 鼠标经过 键盘按下 // 事件处理程序 通过一个函数赋值的方式 完成 btn.onclick = function() { alert('吃饭') } </script> </body>
鼠标事件
鼠标事件 触发条件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发
# 4.操作元素 #
js的DOM操作可以改变网页内容、结构和样式，可以利用DOM操作元素来改变元素里面的内容、属性等，以下这些都是属性
## 4.1 改变元素内容 ##
element.innerText //从起始到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML //起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
<body> <div> </div> <p> 我是文字 <span> 123 </span> </p> <script> // innerText和innerHTML的区别 // 1.innerText 不识别html 标签 去除空格和换行 var div = document.querySelector('div') // div.innerText = '<strong>今天是：</strong> 2019' // 2.innerHTML 的区别 识别Html 标签 div.innerHTML = '<strong>今天是：</strong> 2019' // 这两个属性是可读写的 可以获取元素里面的内容 var p = document.querySelector('p') console.log(p.innerText); console.log(p.innerHTML); </script> </body>
## 4.2 常用元素的属性操作 ##
<body> <button id="ldh">刘德华</button> <button id="zxy">张学友</button> </br> <img src="images/ldh.jpg" alt="" title="刘德华"> <script> // 获取元素 var ldh = document.getElementById('ldh') var zxy = document.getElementById('zxy') var img = document.querySelector('img') zxy.onclick = function() { img.src = "images/zxy.jpg"; img.title = "张学友"; } ldh.onclick = function() { img.src = "images/ldh.jpg"; } </script> </body>
## 4.3 表单元素的属性操作 #
利用DOM可以操作如下表单元素的属性
type、value、cheched、selected、disabled
<body>
<button>
按钮
</button>
<input type="text" value="输入内容">
<script>
//1.获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input')
//2.注册事件 处理程序
btn.onclick = function() {
// 表单里的值 文字内容是通过value 来修改
// input.innerHTML = '点击了'
input.value = '被点击了'
// 表单禁用
// btn.disabled = true;
// this 指向的是时间函数的调用者
this.disabled = true
}
</script>
</body>
## 4.4 样式属性操作 ##
可以通过js修改元素的大小颜色、位置等颜色
1、element.style //行内样式操作
2、element.className // 类名样式操作
1 演示
<body> <div></div> <script> // 获取元素 var div = document.querySelector('div') // 注册事件 处理程序 div.onclick = function() { //div.style this.style.backgroundColor = 'skyblue'; } </script> </body>
2 演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 300px; height: 300px; background-color: pink; } .change { background-color: skyblue; color: #fff; font-size: 25px; margin-top: 100px; } </style> </head> <body> <div>文本</div> <script> // 1.使用element.style 获得修改元素样式,样式少用这个修改 var test = document.querySelector('div') test.onclick = function() { // this.style.backgroundColor = 'skyblue' // this.style.color = '#fff' // this.style.fontSize = '25px' this.className = 'change' // 如果保留原先的类名，可以用多类名选择器 // this.className = 'first change' } </script> </body> </html>
注意
1、js里面的样式采用驼峰命名法 比如fontSize、backgroundColor
2、js修改style样式操作，产生的是行内样式，css权重比较高
3、className 会直接更改元素的类名，会覆盖原先的类名
## 4.5 排他思想 ##
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法
1. 所有元素全部清除样式
2. 给当前元素设置样式
3. 注意顺序不能颠倒，首先干掉其他人，在设置自己
## 4.6 自定义属性操作 ##
>1.获取元素的属性值
// (1) element.属性
// (2)element.getAttribute('属性') Attribute：属性的意思
区别：
element.属性 获取内置属性值（元素本身自带的属性）
element.getAttribute('属性')；主要获得自定义的属性
>2.设置属性值
// Element.属性 = '值'
// Element.getAttribute('属性', '值')
<body> <div id="demo" index="1"> </div> <script> // 1.获取元素的属性值 // (1) element.属性 var div = document.querySelector('div') console.log(div.id); // (2)element.getAttribute('属性') Attribute：属性的意思 console.log(div.getAttribute('id')); // 2.设置属性值 // Element.属性 = '值' div.id = "test" // Element.getAttribute('属性', '值') div.setAttribute('index', '2') </script> </body>
>3.移除属性 removeAttribute('属性')
## 4.7 H5自定义属性 ##
自定义属性目的：为了保存数据
自定义属性容易引起歧义，所以自定义属性一般由data-开头作为属性名字
1 兼容性获取 element.getAttribute('date-属性')
2 H5新增element.dataset['属性'] ie11支持
element.dataset['属性'] 自定义属性里面有多个链接的单词，获取的时候去除 - ，使用驼峰命名法衔接
# 5.节点操作 #
## 5.1 为什么学习操作节点 ##
直接操作元素逻辑性不强，繁琐
>利用节点层级获取元素
利用父子节点获取元素
逻辑性强、兼容性差
## 5.2 节点概述 ##
节点至少拥有nodeType、nodeName、nodeValue三个基本属性
元素节点nodeType 为1
属性节点nodeType 为2
文本节点nodeType 为3（包含文字、空格、换行）
实际开发主要操作元素节点
## 5.3 父节点操作 ##
node.parentNode
<script> var erweima = document.querySelector('.box') // var box = document.querySelector('.box') //得到元素最近的父级节点 erweima.parentNode </script>
可返回某节点的父节点
如果指定的节点没有父节点则返回null
## 5.4 子节点 ##
子节点 会存在读取出文本节点
> node.chlidNodes 标准
注意：返回值里面包含了所有的子节点，包括元素阶段，文本节点
如果想获得里面的元素节点则需要专门处理，不提倡用childNodes
> parentNode.chlidren(非标准)
是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回
虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
<body> <ul> <li>x</li> <li>x</li> <li>x</li> <li>x</li> <li>x</li> <li>x</li> </ul> <ol> <li>c</li> <li>c</li> <li>c</li> <li>c</li> <li>c</li> <li>c</li> </ol> <script> // DOM 提供的方法（API）获取 var ul = document.querySelector('ul') var lis = ul.querySelector('li') // 1.子节点 会存在文本节点 console.log(ul.childNodes); console.log(ul.childNodes[0].nodeType); console.log(ul.childNodes[1].nodeType); // 2.children 获取 console.log(ul.children); </script> </body>
获取返回第一个子元素节点
firstElementChild 这类有兼容性问题，实际开发采用children
<body> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <script> var ol = document.querySelector('ol') // 1.firstChild 第一个子节点,不管是文本 还是元素 console.log(ol.firstChild); // 2.lastChild返回最后一个子节点，找不到则返回null，不管是文本 还是元素 console.log(ol.lastChild); // 3.firstElementChild 返回第一个子元素节点 ie 9才支持 console.log(ol.firstElementChild); console.log(ol.lastElementChild); // 4.实际开发的写法，既没有兼容性问题又返回第一个子元素 console.log(ol.children[0]); console.log(ol.children[ol.children[ol.children.length - 1]]); </script> </body>
## 5.5 兄弟节点 ##
nextElementSibling 下一个兄弟元素节点
previousElementSibling 上一个兄弟元素节点
<body> <div>div</div> <span>span</span> <script> var div = document.querySelector('div') // nextSibling 下一个兄弟节点,包含文本节点等 console.log(div.nextSibling); console.log(div.previousSibling); // console.log(div.nextElementSibling); console.log(div.previousElementSibling); </script> </body>
## 5.6 创建元素 ##
node.appenChild(child)
将一个节点添加到指定父节点的子节点列表末尾。类似css里面的after伪元素
node.insertBefore(child,指定元素)
讲一个节点添加到父节点的指定子节点前面，类似css里面的before
先创建 后添加
document.createElement('li')
演示 简易留言板
<body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> <script> // 1.获取元素 var btn = document.querySelector('button') var text = document.querySelector('textarea') var ul = document.querySelector('ul') // 2.注册事件 btn.onclick = function() { if (text.value == '') { alert('您没有输入内容') return false } else { // (1)创建元素 var li = document.createElement('li') // 先有li 才能赋值 li.innerHTML = text.value // (2)添加元素 ul.insertBefore(li, ul.children[0]) } } </script> </body>
## 5.6 删除元素 ##
node.removeChild()
演示 按钮删除元素
<body> <button>删除</button> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> // 1.获取元素 var ul = document.querySelector('ul') var btn = document.querySelector('button') // 2.删除元素 btn.onclick = function() { ul.children.length >= 1 ? ul.removeChild(ul.children[0]) : this.disabled = true } </script> </body>
阻止链接需要添加javascript:void(0); 或者javascript:;
## 5.6 复制元素 ##
node.cloneNode()
方法返回调用该方法的节点的副本，也称克隆节点
如果括号参数为空或者false 则是钱拷贝，即克隆复制节点本身，也不复制子节点
true则相反
## 5.7 三种动态创建元素区别 ##
1.document.write() 创建元素 是直接将内容写入页面的内容流，但是文档流执行完毕，会导致页面重绘
2.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
3.innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4.createElement() 创建多个元素效率稍低一点点，但是结构更清晰
不同浏览器下 innerHTML效率要比creatElement
<body> <button>点击</button> <p>abc</p> <div class="inner"></div> <div>3</div> <div class="create"></div> <script> // 三种创建元素方式区别 // 1.document.write() 创建元素 // var btn = document.querySelector('button') // btn.onclick = function() { // document.write('<div>123</div>') // } // 2.innerHTML 创建元素 // 追加 var inner = document.querySelector('.inner') // for (var i = 0; i <= 100; i++) { // inner.innerHTML += '<a href="javascript:;">百度</a>' // } var arr = [] for (var i = 0; i <= 100; i++) { arr.push('<a href="javascript:;">百度</a>') } inner.innerHTML = arr.join('') // 3.document.createElement() var create = document.querySelector('.create') for (var i = 0; i <= 100; i++) { var a = document.createElement('a') a.innerHTML = '1' create.appendChild(a) } </script> </body>
