一、查找节点
getElementsById()
getElementsByName()
getElementsByTagName()
getElementsByClassName()
querySelector()
querySelectorAll()
1、通过指定的 id 属性获取节点对象
var e = document.getElementsById(id);
如果一个页面的ID属性不是唯一的,则返回第一个ID对应的节点对象。
在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。
2、通过指定的 name 属性获取节点对象集合
var el = document.getElementsByName(name);
该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。
3、通过指定的 tagName 获取节点对象集合
var el = document/element.getElementsByTagName(tagName);
如果把特殊字符串 "*" 传递给该方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
4、通过指定的 className 获取节点对象集合
var el = document/element.getElementsByClassName(class1[ class2]);
多个类名使用空格分隔,如 "test demo"。
5、通过匹配 css selector 获取节点对象
var e = document/element.querySelector(CSS Selector);
匹配指定 CSS 选择器的第一个元素。 如果没有找到,返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。
6、通过匹配 css selector 选择器获取节点对象集合
var el = document/element.querySelectorAll(CSS Selector);
返回文档中匹配的CSS选择器的所有元素节点列表。
二、节点操作
parentNode.appendChild(newNode); //给某个节点添加子节点
document.insertBefore(newNode,referenceNode); //在某个节点前插入节点
node.replaceChild(newnode,oldnode)//将某个子节点替换为另一个:
cloneNode(true | false); //复制某个节点 参数:是否复制原节点的所有属性
document.normalize(); //normalize 方法合并相邻的文本节点并删除空的文本节点。
splitText(offset) //按照指定的 offset 把文本节点分割为两个节点。
三、删除节点
1、parentNode.removeChild(node); //删除某个节点的子节点 node是要删除的节点
注意:为了保证兼容性,要判断元素节点的节点类型(nodeType),若nodeType==1,再执行删除操作。通过这个方法,就可以在 IE和 Mozilla 完成正确的操作。
2、removeNode(true)xxx是所要删除的节点
不传参数只删除父元素不删除子元素,传参数true删除元素并删除子元素
在火狐中不支持removeNode,那么只有通过object.parentNode.removeChild(object)来实现removeNode了。
3、innerHTML
四、节点事件
HTML事件
语法:<tag 事件= "执行脚本" ></tag>
功能:在HTML元素上绑定事件。
说明:执行脚本可以是一个函数的调用。
DOM0级事件
语法:ele.事件 = 执行脚本
功能:在DOM对象上绑定事件。
说明:执行脚本可以是一个匿名函数,也可以是一个函数的调用。
鼠标事件
onload:页面加载是触发
onclick: 鼠标点击时触发
onmouseover:鼠标滑过时触发
onmouserout:鼠标离开时触发
onfocus:获得焦点时触发
onblur:失去焦点时触发
onchange:域的内容改变时触发
onsubmit:表单中的确认按钮被点击时发生
onmousedown:鼠标按钮在元素上按下时触发
onmousemove:在鼠标指针移动时发生
onmouseup:在元素上松开鼠标按钮时触发
onresize:当调整浏览器窗口的大小时触发
onscroll:拖动滚动条滚动时触发
onkeydown:在用户按下一个键盘按键时触发
onkeypress:在按下键盘按键时发生(只会响应字母与数字符号)
onkeyup:在键盘按键被松开时发生
keyCode:返回onkeypress、onkeydown 或 onkeyup