JS的组成
ECMAScript js的基础语法
DOM 文档对象模型
BOM 浏览器对象模型
DOM
Document Object Model(文档对象模型)
学习DOM就是学习封装好的操作页面的API(应用程序接口)，Application programming interface 就是一些封装好的方法
DOM：文档对象模型(Document Object Model)，又称为文档树模型。是一套操作HTML和XML文档的API(应用程序接口)
DOM是由哪些部分组成的？
首先是由节点组成的，节点又分以下几部分：
元素 属性 文本 注释
1、获得页面元素的方式 【通过JS控制的是行内样式，后面的会覆盖前面的】
类数组是可以用数组方法 【 for 】 进行遍历的 ，只有对象才可以用 【 for in 】方法遍历 ，两种方法并不等价
类数组对象依然用 for 循环遍历
- document.getElementById() 通过标签的Id获得的是唯一的页面标签对象
var li2 = document.getElementById("li2"); //通过id的方式获得页面中的标签，是唯一的一个对象
- document.getElementsByTagName() 通过标签(元素)名
var lis = document.getElementsByTagName("li"); // 通过标签的方式获得所有的li元素,是一个标签对象的数组 【不常用】 【 结果为类数组的对象 】
- document.getElementsByClassName() 通过标签的类名:在JS中不推荐使用这种方式，因为有兼容性的问题 【 结果为类数组的对象 】
var divs = document.getElementsByClassName("box"); // 通过类名的方式获得的也是标签对象的数组
-
H5的获取元素节点（标签）： document.querySelector("") 【 获取不存在的标签，结果为null 】
【 document.querySelector("") 里面的值可以是标签、类名、id 】
-
H5的获取元素节点（标签）： document.querySelectorAll("") 【 其结果为一个类数组的对象 】
后代选择器只能用在H5标签方法中用
注意：DOM对象的属性和标签的属性几乎是一模一样的，用DOM的方法获得的标签对象就是DOM对象
2、获取元素后的一些操作 【 通过对象进行操作 】
获取元素内的内容
textContent
innerHTML
区别：textContent与innerHTML方法类似会返回对象节点下所有的文本内容，但是textContent返回的内容只有去HTML化的文本节点的内容
设置内容
textContent = 【 不能解析标签 】
innerHTML = 【 能解析标签 】
innerHTML会直接渲染成对应的HTML标签
<u>两种方法向对象中赋值都会将原来的内容覆盖掉</u>
标签的属性操作
-
获取属性值（可以获的自定义属性的值）：dom.getAttribute(name)
【 当有多个属性时，会获取多个属性，得到一个字符串 】 对于属性可利用css选择器进行操作
-
设置属性值（可以获的自定义属性的值）：dom.setAttribute(name, value) 【会删除之前的属性，因此先获取之前的属性，在进行添加】
// HTML部分 <div class="test singer" id="dome" aa="aac"> 张良 <div class="name"> 让泪化作相思雨 </div> </div> // js 部分 <script> let div = document.querySelector("div") // 获取元素节点 var attributes = div.getAttribute('class') // 获取节点元素属性 attributes = attributes + " " + "tessss" // 先获取之前的属性，在进行添加 div.setAttribute("class",attributes) // 添加属性 console.log(div) </script> 移除属性值：dom.removeAttribute(name) 【 属性值 】
特例：获取class的值 dom.className , 设置则可以赋值设置，<u>返回的是个字符串</u>
-
特例：获取class的值 dom.classList.add() | remove() , 添加或者删除，返回的是一个类名数组
【 在原有基础上进行增删，而不是整体增删 】
div.classList.add("ccc") // 在元素节点添加类名 div.classList.remove("test") // 在元素节点删除类名
js设置样式
通过js动态添加类名从而达到更改样式
-
通过dom.style属性获取样式 或者设置样式
dom.style.width = "100px" dom.style.heigth = "100px" dom.style.color = "red" dom.style.border = "1px solid red" dom.style.backgroundColor = "yellow" // 例如 div.style.backgroundColor = "pink"
3. 节点
DOM是由节点组成的 节点：标签，文本，学习节点的目的，是为了让我们对DOM操作更加的灵活一些。
节点获取：【 方法 】
dom.parentNode： 获取dom节点的父节点
dom.children: 获取dom节点的子节点，返回的是一个数组
dom.nextElementSibling : 获取dom的下一个元素节点
-
dom.nextSibling ：获取dom的下一个节点（包括元素节点）
【 换行后可能会获取到文本 节点 ，不换行才能获取到元素节点】
dom.previousSibling ： 获取dom的上一个节点（包括元素节点） dom.previousElementSibling 同上
节点的创建和插入：
-
document.createElement()
<script> var box = document.getElementById("box"); var ul = document.createElement("ul"); // 创建的是一对标签 box.appendChild(ul);// 将创建出来的ul标签追加到box中 var li = document.createElement("li"); // 创建的一个标签对象 ul.appendChild(li); li.innerHTML = "这是新添加的内容"; </script>- cloneNode ------》复制
- appendChild // 是在节点内容之添加新增标签
//var li11 = dom.cloneNode(false); // 如果参数是false的话，表示浅度克隆，只克隆标签，不会克隆标签之间的内容
var li11 = li1.cloneNode(true);// 如果参数为true的话，表示 深度克隆，会克隆标签内的一切内容
// var li11 = li1.cloneNode();// 如果不写参数的话，与false一致
// console.log(li11);
// 可以将克隆出来的内容追加到任何一个节点上
// appendChild
ul.appendChild(li11); // 在当前父级元素的最后，追加一个克隆出来的标签节点
console.log(ul);
- m.insertBefore( n , k ) 在m元素的k节点前添加n节点
删除节点
-
m.removeChild(n)删除m元素中的n节点 ： 删除需要通过父节点对象进行删除，删除的是子节点对象
m : 是父节点的对象 【 先要获取父节点对象 】
n : 是需要删除的子节点的对象 【 先要获取该对象，然后才能做删除 】
4、事件
JavaScript是一种事件驱动的语言，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。分为触发和响应
- 触发：交互的某个瞬间
- 响应：就是要执行的某些代码要达到一定的效果
事件三要素
事件源 要给谁注册事件
事件类型 要给事件源注册什么样的事件
事件处理程序 要执行的代码，去达到某种效果 函数或是匿名函数
注册事件
- On的方式注册事件 给一个对象添加多个事件会被覆盖
- addEventListener() 可以给一个对象添加多个事件
移除事件**
dom.removeEventListener(type,listener) 高级浏览器支持的方式
onclick 事件解绑----------》事件覆盖
事件冒泡**
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
事件委托 -------->原理：冒泡原理
本来要自己做的事，可以委托其它的标签去做，这种方式叫做事件委托
比来要给li注册的事件，现在只需要注册到ul即可，通过事件冒泡的方式，也可以达到相应的效果。
原因：为了防止由于子元素过多而影响性能。
target【是固定属性】 指的是触发事件的的目标元素
阻止事件冒泡
取消冒泡和捕获: stopPropagation() 取消冒泡和捕获
事件捕获刚好和事件冒泡相反 ------》冒泡由内到外 捕获由外到内
----》btn,addEventlistener（ ‘click’,函数，true/false ）
false 就是事件冒泡（默认），true就是事件捕获。事件冒泡，事件由内往外执行；事件捕获，事件由外向内执行。通过 true / false 可改变事件的触发顺序。
是从DOM的最外层到目标对象执行触发
而冒泡是从当前对象往DOM的最顶级元素去执行触发
handle : 回调函数/函数/事件处理程序
事件的三个阶段
事件对象event
任何事件触发的时候，程序都会提供给我们一个事件对象event
存储着一些与事件相关的信息
也是有兼容生的，高级浏览器是支持的，但是IE8及以下的浏览器的是支持的window.event
Var e = event || window.event;
三个坐标
event.clientX/Y 可视区，以浏览器可视区的左上角为基准
event.pageX/Y 以页面的左上角为基准
event.screenX/Y 以电脑屏幕的左上角为基准
pageX/Y是有兼容性的，
event.pageX/Y = event.clientX/Y+event.scrollTop/Left
DOM事件的Event对象的常见应用：
- event.preventDefault() : 阻止默认事件（如 a 标签的默认事件）
- event.stopPropagation(): 阻止冒泡
- event.stopImmediatePropagation(): 除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
- event.target: 返回触发事件的元素
- event.currentTarget: 返回绑定事件的元素
DOM 的事件级别
DOM1也是存在，只是没有涉及到事件，DOM3比DOM2多了键盘和鼠标一些事件
DOM的自定义事件：
var eve = new Event('eventName')
dom.addEventListener('eventName',function(){
}) //注册事件
dom.dispatchEvent(eve); // 触发事件，
---------------------------------------------------------
这个事件不能添加参数，想要添加参数，得自定义 CustomEvent事件
// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)
其他事件类型：
Onmouseover 鼠标移入的事件
Onmouseout 鼠标离开的事件
Onfocus 获得焦点的事件
Onblur 失去焦点的事件
Ondblclick 鼠标的双击事件
keydown 键盘按下事件 //可以加过度效果
// 键盘事件 按上下键 div 变颜色
var div = document.querySelector( 'div' )
document.body.addEventListener( 'keydown',function( e ){
console.log( e )
switch( e.key ){
case 'ArrowUp':
div.style.backgroundColor = 'green'
break;
case 'ArrowDown':
div.style.backgroundColor = 'red'
break;
}
} )
移动端的事件
click事件
单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟
touch类事件
触摸事件，有touchstart touchmove touchend touchcancel 四种之分
touchstart：手指触摸到屏幕会触发
touchmove：当手指在屏幕上移动时，会触发
// 移动端事件 touchstart / touchmove
div.addEventListener( 'touchstart',function( e ){
console.log( 111111111111111 )
} )
div.addEventListener( 'touchmove',function( e ){
console.log( 22222222222222 )
})
touchend：当手指离开屏幕时，会触发
touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
tap类事件
触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
原生ajax实现：（原理）
function ajax(options){
var pramas = {
url:'',
type: 'get',
data: {},
success: function (data) {},
error: function (err) {},
}
options = Object.assign(pramas, options)
if(options.url){
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") //兼容性
var url = options.url,
type = options.type.toUpperCase(),
data = options.data,
dataArr = [];
for(let key in data){
let value = key + '='+ data[key]
dataArr.push(value)
}
if(type === "GET"){
url = url + "?" + dataArr.join('&')
xhr.open(type, url, true)
xhr.send()
}
if(type === "POST"){
xhr.open(type,url, true)
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
xhr.send(dataArr.join('&'))
}
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { // 304未修改 //4代表服务器返回了数据 //200代表服务器返回正确的数据
options.success(xhr.responseText)
}else {
options.error(xhr.responseText)
}
}
}
}
JS 城市列表渲染
对象中属性值得访问方法： obj.属性（点后面一定是属性） obj[ 有引号“ ”就是属性，没有引号“ ”就是变量 ]
