JS DOM操作节点(查找、操作、删除节点)及节点事件

您所在的位置：网站首页 › 删除一个节点的操作是 › JS DOM操作节点(查找、操作、删除节点)及节点事件

JS DOM操作节点(查找、操作、删除节点)及节点事件

#JS DOM操作节点(查找、操作、删除节点)及节点事件| 来源: 网络整理| 查看: 265

一、查找节点 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事件

语法：功能：在HTML元素上绑定事件。说明：执行脚本可以是一个函数的调用。

DOM0级事件

语法：ele.事件 = 执行脚本功能：在DOM对象上绑定事件。说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。

鼠标事件

onload：页面加载是触发 onclick：鼠标点击时触发 onmouseover：鼠标滑过时触发 onmouserout：鼠标离开时触发 onfocus：获得焦点时触发 onblur：失去焦点时触发 onchange：域的内容改变时触发 onsubmit：表单中的确认按钮被点击时发生 onmousedown：鼠标按钮在元素上按下时触发 onmousemove：在鼠标指针移动时发生 onmouseup：在元素上松开鼠标按钮时触发 onresize：当调整浏览器窗口的大小时触发 onscroll：拖动滚动条滚动时触发 onkeydown：在用户按下一个键盘按键时触发 onkeypress：在按下键盘按键时发生(只会响应字母与数字符号) onkeyup：在键盘按键被松开时发生 keyCode：返回onkeypress、onkeydown 或 onkeyup

【本文地址】

JS DOM操作节点(查找、操作、删除节点)及节点事件

JS DOM操作节点(查找、操作、删除节点)及节点事件

今日新闻

推荐新闻