JavaScript之DOM对象
HTML DOM
-
HTML Document Object Model（文档对象模型）
-
HTML DOM 定义了访问和操作HTML文档的标准方法
-
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)
DOM树
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
DOM节点
节点类型
HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
- 整个文档是一个文档节点
- 每个 HTML 标签是一个元素节点
- 包含在 HTML 元素中的文本是文本节点
- 每一个 HTML 属性是一个属性节点
其中，document与element节点是重点。
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素。
*节点查找
直接查找节点
document.getElementById(“idname”) //document 为查找范围，表示从全文查找document.getElementsByTagName(“tagname”)document.getElementsByName(“name”)document.getElementsByClassName(“name”)
i am div2i am div2i am div2hello p
注意：设计到寻找元素，注意<script>标签的位置！
导航节点属性： 调用者为节点标签（格式：NodeElement.children）
parentElement // 父节点标签元素children // 所有子标签firstElementChild // 第一个子标签元素lastElementChild // 最后一个子标签元素nextElementSibling // 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素
注意，js中没有办法找到所有的兄弟标签！
*节点操作
创建节点：
createElement(标签名) ：创建一个指定名称的元素。例：var tag=document.createElement(“input") tag.setAttribute('type','text'); 添加节点：
追加一个子节点（作为最后的子节点）somenode.appendChild(newnode) 把增加的节点放到某个节点的前边somenode.insertBefore(newnode,某个节点);
删除节点：
removeChild()：获得要删除的元素，通过父元素调用删除
替换节点：
somenode.replaceChild(newnode, 某个节点);
节点属性操作：
1、获取文本节点的值：innerText innerHTML
2、attribute操作
elementNode.setAttribute(name,value) elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML)elementNode.removeAttribute(“属性名”);
3、value获取当前选中的value值 1.input 2.select （selectedIndex） 3.textarea 4、innerHTML 给节点添加html代码： 该方法不是w3c的标准，但是主流浏览器支持 tag.innerHTML = “<p>要显示内容</p>”;
5、关于class的操作：
elementNode.classNameelementNode.classList.addelementNode.classList.remove
6、改变css样式：
Hello world!
document.getElementById("p2").style.color="blue"; .style.fontSize=48px
DOM Event(事件)
事件类型
onclick 当用户点击某个对象时调用的事件句柄。ondblclick 当用户双击某个对象时调用的事件句柄。onfocus 元素获得焦点。 练习：输入框onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.onkeypress 某个键盘按键被按下并松开。onkeyup 某个键盘按键被松开。onload 一张页面或一幅图像完成加载。onmousedown 鼠标按钮被按下。onmousemove 鼠标被移动。onmouseout 鼠标从某元素移开。onmouseover 鼠标移到某元素之上。onmouseleave 鼠标从元素离开onselect 文本被选中。onsubmit 确认按钮被点击。
绑定事件方式
方式1:
点我呀
方式2:
试一试!
事件介绍
1、onload：
onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
Title hello p
2、onsubmit：
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
Title
3、事件传播：
4、onselect：
5、onchange:
6、onkeydown:
Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode. 7、onmouseout与onmouseleave事件的区别：
Title 先看下使用mouseout的效果:
使用了mouseout事件↓第一行第二行第三行
实例练习
1、搜索框
Title
2、模态对话框
Title
3、表格案例
Title
| 111 | 111 | 111 | |
| 222 | 222 | 222 | |
| 333 | 333 | 333 | |
| 444 | 444 | 444 |
4、select移动
Title
5、二级联动
6、跑马灯与tab切换
tab 京东商城欢迎您
家用电器 家具 汽车 食品 女鞋 医疗保健
