一、DOM对象
1.什么是HTML DOM
HTML Document Object Model（文档对象模型---标签）
2.功能：定义了访问（查找）和操作HTML文档的标准方法
3.HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)
DOM树的目的：导航标签
4.DOM节点
1.DOM树的每一个节点对象（Node）就是每一个标签 2.节点主要有两个： 1. document （整个结构html标签） 2. element （里面的每一个标签） 3.节点关系： 节点树中的节点彼此拥有层级关系。 父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。 在节点树中，顶端节点被称为根（root） 每个节点都有父节点、除了根（它没有父节点） 一个节点可拥有任意数量的子 同胞是拥有相同父节点的节点 4.节点查找 1.直接查找
document.getElementById(“idname”) #得到标签对象 document.getElementsByTagName(“tagname”) #得到数组对象 document.getElementsByName(“name”) #得到数组对象 document.getElementsByClassName(“name”) #得到数组对象 
注意：设计到寻找元素，注意<script>标签的位置！
注意：每一个标签都是一个对象，对象就可以调用属性和方法
2.导航查找 ：通过某个标签定位到某些标签
导航节点属性：
'''parentElement // 父节点标签元素children // 所有子标签firstElementChild // 第一个子标签元素lastElementChild // 最后一个子标签元素nextElementtSibling // 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素'''
注意，js中没有办法找到所有的兄弟标签！
5.节点属性操作
1、属性操作
var ele=document.getElementsByClassName("c1")[0]; （1） 文本操作： ele.innerText 取值 ele.innerText="Egon"; 赋值 ele.innerHTML； 取值 ele.innerHTML="<a href=''>click</a>"; 赋值 区别在 innerHTML可以取值和赋值标签，而innerText不行 （2）属性操作 // 取属性值（对所有的属性都可以，除了class类） console.log(ele.getAttribute("id")); console.log(ele.id); --简便 // 属性赋值：（对所有的属性都可以，除了class类） ele.setAttribute("id","d2") ele.id="d2"; --简便 // class属性 console.log(ele.className); 查看 ele.classList.add("hide"); 增加 ele.classList.remove("hide"); 删除 2 、节点操作（增删改） 1 创建节点 ： document.createElement("标签名") 2 添加节点 ： ele_parent.appentChild(ele_child) 3 删除节点 ： ele_parent.removeChild(ele_child) 4 替换节点 ： ele_parent.repalceChild(newnode, 某个节点)
1 2 3 4 5Title 6 13 14 75 76 77 78 79 808183 84 85 86 87 88p1
82
1 2 3 4 5Title 6 27 28 29 30 31 32
| 37 | 38 | 39 40 | 41
| 45 | 46 | 47 48 | 49
| 53 | 54 | 55 56 | 57
| 61 | 62 | 63 64 | 65
5.事件
DIVDIV2
- 111
- 222
- 333
- 444
练习：左侧菜单
左侧菜单实例 菜单一菜单二菜单三
1、onload 事件：onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.2、onsubmit 事件：当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
Title
Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了 ，需要问下event对象的属性，这里就是KeyCode. 1 2 3 4 5Title 6 7 8 9 10 11 21 22
4、事件传播
1 2 3 4 5Title 6 7 20 21 2223 2425 26 39 40
5、onblur与onfocus事件
Title
6、模态对话框练习
# Column heading Column heading Column heading Column heading 1 Column heading Column heading Column heading 2 Column heading Column heading Column heading 3 Column heading Column heading Column heading 4 Column heading Column heading Column heading 5 Column heading Column heading Column heading 6 Column heading Column heading Column heading 7 Column heading Column heading Column heading 8 Column heading Column heading Column heading 9 Column heading Column heading Column heading
7、正反选实例练习
Title
| 111 | 111 | |
| 111 | 111 | |
| 111 | 111 | |
| 111 | 111 |
8、onchange 事件
域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
Title
9、onmouseleave 与onmouseout
Title onmouseover
10、onselect 事件 ， 文本被选中。
11、事件委派
Title
- 111
- 222
- 333
12、ondblclick 事件 当用户双击某个对象时调用的事件句柄。
13、
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
14、
onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开
二、实例练习
1 左侧菜单
Title 菜单一
- 111
- 111
- 111
菜单二菜单三
2 搜索框
Title
3 模态对话框
Title
4 表格案例
Title
| 111 | 111 | 111 | |
| 222 | 222 | 222 | |
| 333 | 333 | 333 | |
| 444 | 444 | 444 |
5 select移动
Title
6 二级联动
7 跑马灯与tab切换
tab 京东商城欢迎您
家用电器 家具 汽车 食品 女鞋 医疗保健
三、js的作用域
作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。
任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。
1. 全局作用域(Global Scope)
在代码中任何地方都能访问到的对象拥有全局作用域，一般来说一下几种情形拥有全局作用域：
(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域
var name="yuan"; function foo(){ var age=23; function inner(){ console.log(age); } inner(); } console.log(name); // yuan //console.log(age); // Uncaught ReferenceError: age is not defined foo(); // 23 inner(); // Uncaught ReferenceError: inner is not defined (2)所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：
var name="yuan"; function foo(){ age=23; var sex="male" } foo(); console.log(age); // 23 console.log(sex); // sex is not defined 变量blog拥有全局作用域，而sex在函数外部无法访问到。
2. 局部作用域(Local Scope)
和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域.
如示例1中的age与inner都只有局部作用域。（js中if、for没有自己的作用域）
3.作用域链(Scope Chain)
在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
1.示例演示
//-----**********************例1*********************************var s=12; function f(){ console.log(s); var s=12; // if s=12 console.log(s) } f();//-----**********************例2*********************************var s=10;function foo(){ console.log(s); var s=5; console.log(s); function s(){console.log("ok")}// 函数的定于或声明是在词法分析时完成的,执行时已不再有任何操作 console.log(s);}foo();//-----***********************例3********************************function bar(age) { console.log(age); var age = 99; var sex= 'male'; console.log(age); function age() { alert(123) }; console.log(age); return 100;}result=bar(5);//-----******************************************************** 2.结果分析
接下来我们就以最复杂的例3来分析整个过程。
function bar(age) { console.log(age); var age = 99; var sex="male"; console.log(age); function age(){ alert(123); } ; console.log(age); return 100;}result=bar(5);一 词法分析过程(涉及参数，局部变量声明，函数声明表达式)： 1-1 、分析参数，有一个参数，形成一个 AO.age=undefine; 1-2 、接收参数 AO.age=5; 1-3 、分析变量声明，有一个 var age, 发现 AO 上面有一个 AO.age ，则不做任何处理 1-4 、分析变量声明，有一个 var sex，形成一个 AO.sex=undefine; 1-5 、分析函数声明，有一个 function age(){} 声明， 则把原有的 age 覆盖成 AO.age=function(){};二 执行过程： 2-1 、执行第一个 console.log(age) 时，当前的 AO.age 是一个函数，所以输出的一个函数 2-2 、这句 var age=99; 是对不 AO.age 的属性赋值， AO.age=99 ，所以在第二个输出的age是 99; 2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。 注意：执行阶段： function age(){ alert(123) } ; 不进行任何操作，将执行语句复制给age这部操作是在词法分析时，即运行前完成的。