【学习js第五周】

---

一、DOM

1.1获取元素

获取页面元素方法：
1.根据ID获取
2.根据标签名获取
3.通过HTML5获取
4.特殊元素获取

1.1.1根据ID 获取

使用getElementById()方法可以获取带有ID的元素对象。

document.getElementById('id');

1.1.2根据标签名获取

使用getElementByTagName()方法可以返回带有指定标签名的对象的集合。

document.getElementByTagName('标签名'）；

1.1.3通过HTML5获取

document.getElementByClassName('类名'）；

document.querySelector('选择器'）；

document.querySelectorAll('选择器'）；

1.1.4特殊元素获取(body,html)

获取body元素

document.body

获取html元素

document.documentElement

1.2事件基础

1.2.1事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解: 触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

1.2.2事件三要素

1. 事件源 (谁)
2. 事件类型 (什么事件)
3. 事件处理程序 (做啥)

1.2.3案例

点击按钮弹出警示框

var btn = document.getElementById('btn'); btn.onclick = function() {
alert('你好吗'); };

1.2.4执行事件的步骤

1. 获取事件源
2. 注册事件(绑定事件)
3. 添加事件处理程序(采取函数赋值形式）

1.2.5常见的鼠标事件

1.2.6分析事件三要素

下拉菜单三要素
关闭广告三要素

1.3操作元素

1.3.1改变元素内容

element.innerText

element.innerHTML

1.3.2常用元素的属性操作

1.3.3表单元素的属性操作

利用DOM可以操作入下表单元素的属性
type、value、checked、selected、disabled

1.3.4样式属性操作

我们可以通过js修改元素的大小、颜色、位置等样式

  1. element.style 行内样式操作 
  2. element.className 类名样式操作

1. 如果样式修改较多，可以采取操作类名方式更改元素样式。
2. class因为是个保留字，因此使用className来操作元素类名属性
3. className 会直接更改元素的类名，会覆盖原先的类名
   

1.4节点操作

1.4.1获取元素通常使用两种方式:

1. 利用 DOM 提供的方法获取元素
   document.getElementById()
   document.getElementsByTagName()
   Document.queryselector
   逻辑性不强、繁琐
   2.利用节点层级关系获取元素
   利用父子兄节点关系获取元素
   逻辑性强，但是兼容性稍差

1.4.2节点概述

1.4.3节点层级

1.4.3.1父级节点

node.parentnode

1.4.3.2子节点

parent.node.childnodes

var nav = document.querySelector('.nav'); var lis = nav.children; // 得到4个小li
for (var i = 0; i < lis.length; i++) { lis[i].onmouseover = function() { this.children[1].style.display = 'block'; }
lis[i].onmouseout = function() { this.children[1].style.display = 'none'; }
}

1.4.3.3兄弟节点

function getNextElementSibling(element) { var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) { return el;
} }
return null; }

1.4.4创建节点

document.createElement('tagName')

document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在， 是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

1.4.5删除节点

node.removeChild(child)

1.4.6复制节点

node.cloneNode()

1.4.6三种动态元素的区别

1.5DOM重点核心

1.5.1创建

1. document.write
2. innerHTML
3. createElement

1.5.2增

1. appendChild
2. insertBefore

1.5.3删

1.removechild

1.5.4改

1.5.5查

主要获取查询dom的元素

1. DOM提供的API 方法: getElementById、getElementsByTagName 古老用法 不太推荐
2. H5提供的新方法: querySelector、querySelectorAll 提倡
3. 利用节点操作获取元素: 父(parentNode)、子(children)、兄(previousElementSibling、 nextElementSibling) 提倡

1.5.6属性操作

主要针对于自定义属性。

1. setAttribute:设置dom的属性值
2. getAttribute:得到dom的属性值
3. removeAttribute移除属性

1.5.7事件操作