1. DOM节点访问
1.1 直接获取
document.getElementById("intro");//返回单个id为into的元素节点
document.getElementsByTagName("p");//返回所有标签p的元素集合,也可以node.document.getElementsByTagName("p");//代表node的所有p子孙节点
document.getElementsByClassName("intro");//集合
document.getElementsByName("intro");//集合
document.getElementsByNameNS("intro"); //namespace
1.2 父子兄弟操作(dom的操作需要注意换行和空格,也可能是节点)
var chils= s.childNodes; //得到s的全部子节点 坑:1.子节点还是子孙(浏览器) 2.空格换行可能是节点
var par=s.parentNode; //得到s的父节点
var ns=s.nextSbiling; //获得s的下一个兄弟节点
var ps=s.previousSbiling; //得到s的上一个兄弟节点
var fc=s.firstChild; //获得s的第一个子节点
var lc=s.lastChile; //获得s的最后一个子节点节点属性
2.DOM属性
2.1 innerHTML
等号的位置决定读写
2.2 nodeName,nodeValue,nodeType
无非属性、元素、文档、注释等取值不同,一般用的不太多
3.修改DOM
appendChild(node) 把新的子节点添加到指定节点。
removeChild(node) 删除子节点。
replaceChild(node) 替换子节点。
insertBefore(node) 在指定的子节点前面插入新的子节点。
createAttribute(name,value) 创建属性节点。
createElement(tag) 创建元素节点。
createTextNode(tesxt) 创建文本节点。
getAttribute(name) 返回指定的属性值。
setAttribute(name,value) 把指定属性设置或修改为指定的值。
4.事件
document.getElementById("myBtn").onclick=function(){displayDate()}; //是否可以给集合这样直接添加事件
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
<h1 onclick="changetext(this)">点击文本!</h1>
document.getElementById("myBtn").addEventListener("click", displayDate);
常用事件:
onload 和 onunload 事件:当用户进入或离开页面时,会触发 onload 和 onunload 事件。
onchange 事件:onchange 事件常用于输入字段的验证。
onmouseover 和 onmouseout 事件:onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件:onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时,触发 onmousedown 事件,然后,当鼠标按钮被松开时,会触发 onmouseup 事件,最后,当鼠标点击完成时,触发 onclick 事件。