JavaScript DOM节点操作方式全面讲解_javascript技巧_

一、获取元素的两种方式

我们获取元素通常用两种方式：

1.利用DOM提供的方法获取元素

1.document.getElementByld()
2.document.getElementsByTagName
3.document.querySelector 等
4.逻辑性不强、繁琐

比如在这里如果我们想获取全部的li标签，我们应该先得到父标签ul，可以用querySelector方法，然后再querySelectorAll里面的所有li。

所以这样获取元素带来的逻辑性不强，只要用到都要获取。

2.利用层级关系获取元素

当我们从节点层次考虑时，获取上面的li就非常简单了，因为li是ul的孩子，我们可以通过层级关系直接拿到他，非常的方便

1.利用父子兄节点关系获取元素

2.逻辑性强，但是兼容性差

二、节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等），在DOM中，节点使用node来表示。

HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。

DOM树：

这些li都是标签都属于元素节点

值得注意的是：

这里选中的空格属于文本节点

一般地，节点至少拥有nodeType(节点类型）、nodeName(节点名称)、和nodeValue(节点值)这三个基本属性`

元素节点nodeType为1

属性节点nodeType为2

文本节点nodeType 为3(文本节点包含文字、空格、换行等)

我们在实际开发中，节点操作主要操作的是元素节点

三、节点层级

1.父级节点

node.parentNode //得到离元素最近的父级节点，找不到父节点就返回null

2.子节点

在上述代码中，我们想要获取ul里的所有li，应该怎么办

下面是DOM提供的方法（API）获取：

var ul = document.querySelector('ul'); var lis = ul.querySelectorAll('li'); 

现在我们可以通过节点操作来获取子节点了

有以下两种方法：

1.parentNode.childNodes(标准)  //返回包括指定节点的子节点的集合
2.parentNode.children(非标准)   //返回所有的子元素节点

那我们应该用哪一种方法呢？

注意：第一种标准方法返回值里包含的是所有的子节点，包括元素节点、文本节点等（例如我们前面说过的空格）

如果只想要获得里面的元素节点，则需要专门处理，所以一般不提倡用childNodes

第二种方法里parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的)。

虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

3.第一个子元素和最后一个子元素

有以下代码：

我是li1
我是li2
我是li3
我是li4

我们想要获取第一个和最后一个li，应该怎么做呢

var ol = document.querySelector( 'ol '); //获取父级节点 console.log(ol.firstChild); //获取第一个孩子 

这样，我们是不是可以获得第一个li了呢？

输出结果：

为什么没有获取到li呢，答案是因为firstChild获取的是第一个子节点，

后面接着的是空格，所以第一个子节点应该是文本节点。

所以我们可以得到：firstChild与lastChild返回的是第一个和最后一个子节点，不管是文本节点还是元素节点

那返回第一个元素节点和最后一个元素节点的方法是什么呢?

parentNode.firstElementChild
firstElementChild 返回第一个子元素节点，找不到则返回null。
parentNode.lastElementChild
lastElementChild返回最后一个子元素节点，找不到则返回null。

注意：这两个方法有兼容性问题，IE9以上才支持

那到底什么是两全其美的方法呢？

实际上开发的方法，既没有兼容性问题又返回第一个和最后一个元素：

parentNode.children[0]; //返回第一个元素节点 parentNode.children[parentNode.children.length-1]; //返回最后一个元素节点 

4.小案例（新浪下拉菜单）

实现效果：

示例代码：

微博
私信
评论
@我
微博
私信
评论
@我
微博
私信
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：TypeScript Typeof运算符的5个实用技巧详解_javascript技巧_
                                                                
下一篇：Node.js实现http请求服务与Mysql数据库操作方法详解_node.js_