这篇文章主要介绍了 JavaScript 操作 html DOM 节点的基础入门教程, 包括对节点的创建修改删除等操作, 还特别提到了其中 appendChild() 与 insertBefore() 插入节点时需注意的问题, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
因为 DOM 的存在,这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。
NOTE:下面提供的例子中的 element 均为元素节点。
获取节点
父子关系
- element.parentNode
- element.firstChild/element.lastChild
- element.childNodes/element.children
兄弟关系
- element.previousSibling/element.nextSibling
- element.previousElementSibling/element.nextElementSibling
通过节点直接的关系获取节点会导致代码维护性大大降低(节点之间的关系变化会直接影响到获取节点),而通过接口则可以有效的解决此问题。
通过节点直接的关系获取节点会导致代码维护性大大降低(节点之间的关系变化会直接影响到获取节点),而通过接口则可以有效的解决此问题。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- ELEMENT_NODE & TEXT_NODE
- </title>
- </head>
- <body>
- <ul id="ul">
- <li>
- First
- </li>
- <li>
- Second
- </li>
- <li>
- Third
- </li>
- <li>
- Fourth
- </li>
- </ul>
- <p>
- Hello
- </p>
- <script type="text/javascript">
- var ulNode = document.getElementsByTagName("ul")[0];
- console.log(ulNode.parentNode); //<body></body>
- console.log(ulNode.previousElementSibling); //null
- console.log(ulNode.nextElementSibling); //<p>Hello</p>
- console.log(ulNode.firstElementChild); //<li>First</li>
- console.log(ulNode.lastElementChild); //<li>Fourth</li>
- </script>
- </body>
- </html>
NTOE:细心的人会发现,在节点遍历的例子中,body、ul、li、p 节点之间是没有空格的,因为如果有空格,那么空格就会被当做一个 TEXT 节点,从而用 ulNode.previousSibling 获取到得就是一个空的文本节点,而不是
节点了。即节点遍历的几个属性会得到所有的节点类型,而元素遍历只会得到相对应的元素节点。一般情况下,用得比较多得还是元素节点的遍历属性。
实现浏览器兼容版的 element.children
- <html lang>
- <head>
- <meta charest="utf-8">
- <title>
- Compatible Children Method
- </title>
- </head>
- <body id="body">
- <div id="item">
- <div>
- 123
- </div>
- <p>
- ppp
- </p>
- <h1>
- h1
- </h1>
- </div>
- <script type="text/javascript">
- function getElementChildren(e) {
- if (e.children) {
- return e.children;
- } else {
- /* compatible other browse */
- var i, len, children = [];
- var child = element.firstChild;
- if (child != element.lastChild) {
- while (child != null) {
- if (child.nodeType == 1) {
- children.push(child);
- }
- child = child.nextSibling;
- }
- } else {
- children.push(child);
- }
- return children;
- }
- }
- /* Test method getElementChildren(e) */
- var item = document.getElementById("item");
- var children = getElementChildren(item);
- for (var i = 0; i < children.length; i++) {
- alert(children[i]);
- }
- </script>
- </body>
- </html>
NOTE:此兼容方法为初稿,还未进行兼容性测试。
接口获取元素节点
- getElementById
- getElementsByTagName
- getElementsByClassName
- querySelector
- querySelectorAll
getElementById
获取文档中指定 id 的节点对象。
- var element = document.getElementById('id');
- getElementsByTagName
- // 示例
- var collection = element.getElementsByTagName('tagName');
- // 获取指定元素的所有节点
- var allNodes = document.getElementsByTagName('*');
- // 获取所有 p 元素的节点
- var elements = document.getElementsByTagName('p');
- // 取出第一个 p 元素
- var p = elements[0];
getElementsByClassName
获取指定元素中具有指定 class 的所有节点。多个 class 可的选择可使用空格分隔,与顺序无关。
var elements = element.getElementsByClassName('className');
NOTE:IE9 及一下版本不支持 getElementsByClassName
兼容方法
- function getElementsByClassName(root, className) {
- // 特性侦测
- if (root.getElementsByClassName) {
- // 优先使用 W3C 规范接口
- return root.getElementsByClassName(className);
- } else {
- // 获取所有后代节点
- var elements = root.getElementsByTagName('*');
- var result = [];
- var element = null;
- var classNameStr = null;
- var flag = null;
- className = className.split(' ');
- // 选择包含 class 的元素
- for (var i = 0,
- element; element = elements[i]; i++) {
- classNameStr = ' ' + element.getAttribute('class') + ' ';
- flag = true;
- for (var j = 0,
- name; name = className[j]; j++) {
- if (classNameStr.indexOf(' ' + name + ' ') === -1) {
- flag = false;
- break;
- }
- }
- if (flag) {
- result.push(element);
- }
- }
- return result;
- }
- }
querySelector / querySelectorAll
获取一个 list (其返回结果不会被之后 DOM 的修改所影响,获取后不会再变化)符合传入的 CSS 选择器的第一个元素或全部元素。
- var listElementNode = element.querySelector('selector');
- var listElementsNodes = element.querySelectorAll('selector');
- var sampleSingleNode = element.querySelector('#className');
- var sampleAllNodes = element.querySelectorAll('#className');
NOTE: IE9 一下不支持 querySelector 与 querySelectorAll
创建节点
创建节点 -> 设置属性 -> 插入节点
- var element = document.createElement('tagName');
修改节点
textContent
获取或设置节点以及其后代节点的文本内容(对于节点中的所有文本内容)。
- element.textContent; // 获取
- element.textContent = 'New Content';
NOTE:不支持 IE 9 及其一下版本。
innerText (不符合 W3C 规范)
获取或设置节点以及节点后代的文本内容。其作用于 textContent 几乎一致。
- element.innerText;
NOTE:不符合 W3C 规范,不支持 FireFox 浏览器。
FireFox 兼容方案
- if (! ('innerText' in document.body)) {
- HTMLElement.prototype.__defineGetter__('innerText',
- function() {
- return this.textContent;
- });
- HTMLElement.prototype.__defineSetter__('innerText',
- function(s) {
- return this.textContent = s;
- });
- }
插入节点
appendChild
在指定的元素内追加一个元素节点。
- var aChild = element.appendChild(aChild);
insertBefore
在指定元素的指定节点前插入指定的元素。
- var aChild = element.insertBefore(aChild, referenceChild);
删除节点
删除指定的节点的子元素节点。
- var child = element.removeChild(child);
innerHTML
获取或设置指定节点之中所有的 HTML 内容。替换之前内部所有的内容并创建全新的一批节点(去除之前添加的事件和样式)。innerHTML 不检查内容,直接运行并替换原先的内容。
NOTE:只建议在创建全新的节点时使用。不可在用户可控的情况下使用。
- var elementsHTML = element.innerHTML;
存在的问题 +
PS: appendChild() , insertBefore() 插入节点需注意的问题
使用 appendChild() 和 insertBefore() 插入节点都会返回给插入的节点,
- //由于这两种方法操作的都是某个节点的子节点,所以必须现取得父节点,代码中 someNode 表示父节点
- //使用appendChild()方法插入节点
- var returnedNode = someNode.appendChild(newNode);
- alert(returnedNode == newNode) //true
- //使用insertBefore()方法插入节点
- var returnedNode = someNode.appendChild(newNode);
- alert(returnedNode == newNode) //true
值得注意的是,如果这两种方法插入的节点原本已经存在与文档树中,那么该节点将会被移动到新的位置,而不是被复制。
- <div id="test">
- <div>
- adscasdjk
- </div>
- <div id="a">
- adscasdjk
- </div>
- </div>
- <script type="text/javascript">
- var t = document.getElementById("test");
- var a = document.getElementById('a');
- //var tt = a.cloneNode(true);
- t.appendChild(a);
- </script>
在这段代码中,页面输出的结果和没有 Javascript 时是一样的,元素并没有被复制,由于元素本来就在最后一个位置,所以就和没有操作一样。如果把 id 为 test 的元素的两个子元素点换位置,就可以在 firbug 中看到这两个 div 已经被调换了位置。
如果我们希望把 id 为 a 的元素复制一个,然后添加到文档中,那么必须使被复制的元素现脱离文档流。这样被添加复制的节点被添加到文档中之后就不会影响到文档流中原本的节点。即我们可以把复制的元素放到文档的任何地方,而不影响被复制的元素。下面使用了 cloneNode() 方法,实现节点的深度复制,使用这种方法复制的节点会脱离文档流。当然,我不建议使用这种方法复制具有 id 属性的元素。因为在文档中 id 值是唯一的。
- <div id="test">
- <div>
- adscasdjk
- </div>
- <div id="a">
- adscasdjk
- </div>
- </div>
- <script type="text/javascript">
- var t = document.getElementById("test");
- var a = document.getElementById('a');
- var tt = a.cloneNode(true);
- t.appendChild(tt);
- </script>
相似的操作方法还有 removeNode(node) 删除一个节点,并返回该节;replaceNode(newNode,node) 替换 node 节点,并返回该节点。这两种方法相对来说更容易使用一些。
来源: http://www.phperz.com/article/17/0405/266715.html