1.查找结点
- document.getElementById(id)
说明：在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。
This is a header
Click on the header to alert its value
function id(x) { if (typeof x == "string") return document.getElementById(x); return x; } - document.getElementsByName(name)
说明：返回带有指定名称的对象的集合。查询元素的 name 属性，如 HTML 表单中的单选按钮通常具有相同的 name 属性。所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
- document.getElementsByTagName(tagname)
说明：返回带有指定标签名的对象的集合。元素的顺序是它们在文档中的顺序
- document.getElementsByClassName(“name”)
说明：返回带有指定类名的对象的集合。元素的顺序是它们在文档中的顺序
1111111111111
2222222222222
33333333333333
2.导航节点
parentElement // 父节点标签元素children // 所有子标签firstElementChild // 第一个子标签元素lastElementChild // 最后一个子标签元素nextElementtSibling // 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素
注意，js中没有办法找到所有的兄弟标签！
3.节点操作
3.1创建节点
createElement(标签名) ：创建一个指定名称的元素。
var tag = document.createElement("input");tag.setAttribute("type","text"); 3.2添加节点
追加一个子节点（作为最后的子节点）somenode.appendChild(newnode) 把增加的节点放到某个节点的前边somenode.insertBefore(newnode,某个节点);
3.3删除节点
removeChild()：获得要删除的元素，通过父元素调用删除
3.4替换节点
somenode.replaceChild(newnode, 某个节点);
案例：
Title 增加节点
4.节点属性
4.1、获取文本节点的值：innerText innerHTML
4.2、attribute操作
elementNode.setAttribute(name,value) elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML) elementNode.removeAttribute(“属性名”);
4.3、value获取当前选中的value值 1.input 2.select （selectedIndex） 3.textarea 4.4、innerHTML 给节点添加html代码： 该方法不是w3c的标准，但是主流浏览器支持 tag.innerHTML = “<p>要显示内容</p>”;
5、关于class的操作(对class属性进行操作，一般用于改变class某个名字，隐藏某种样式)
elementNode.classNameelementNode.classList.addelementNode.classList.remove
6、改变css样式：
Hello world!
document.getElementById("p2").style.color="blue"; .style.fontSize=48px
7.DOM event事件
7.1事件类型
onclick 当用户点击某个对象时调用的事件句柄。ondblclick 当用户双击某个对象时调用的事件句柄。onfocus 元素获得焦点。 练习：输入框onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.onkeypress 某个键盘按键被按下并松开。onkeyup 某个键盘按键被松开。onload 一张页面或一幅图像完成加载。onmousedown 鼠标按钮被按下。onmousemove 鼠标被移动。onmouseout 鼠标从某元素移开。onmouseover 鼠标移到某元素之上。onmouseleave 鼠标从元素离开onselect 文本被选中。onsubmit 确认按钮被点击。
7.2绑定事件的方式
点我呀
试一试!
7.3事件案例
- onload
onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
Title hello p
- onsubmit
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
Title
- 事件传播
- onselect
- onchange
- onkeydown
Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.
- onmouseout与onmouseleave事件的区别：
Title 先看下使用mouseout的效果:
使用了mouseout事件↓第一行第二行第三行
8.实例操作
8.1搜索框
Title
8.2模态对话框
Title
8.3表格案例
Title
| 111 | 111 | 111 | |
| 222 | 222 | 222 | |
| 333 | 333 | 333 | |
| 444 | 444 | 444 |
8.4select移动
Title
8.5二级联动
8.6跑马灯与tab切换
tab 京东商城欢迎您
家用电器 家具 汽车 食品 女鞋 医疗保健
