JavaScript DOM——获取节点的方法

一、DOM：document object model (文档对象模型)

Js分为ECMA 、BOM 、DOM
ECMA：放的是核心语法,比如for循环、if语句
BOM部分主要是针对浏览器的内容
*window是全局对象很多关于浏览器的脚本设置都是通过它。
*location则是与地址栏内容相关，比如想要跳转到某个页面，或者通过URL获取一定的内容。
*navigator中有很多浏览器相关的内容，通常判断浏览器类型都是通过这个对象。
*screen常常用来判断屏幕的高度宽度等。
*history不太常用，一般应该不会有写关于历史记录的脚本。

二、获取节点

下面是三种方法：
1.doucment.getElementByld()===>选取有id节点
该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。

2.document.getElementsByTagName()==》选取节点名称.
该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组.
例如：document.getElementsByTagName(‘A’)将会返回页面上所有超链接节点。

查询lis变量→获得HTML的集合

下标0→获取具体的元素

给第一个元素加一个背景颜色

用for循环实现全部都加

只给上面五个li加背景颜色

3.document.getElementsByClassName()===》获取有class 节点
注：984行lis前面不加点.

注：在IE8或者IE8以下不支持
css{ id== >#box ；class== >.box}
例：封装函数，实现可以获取到class名的节点
步骤：
封装一个函数lis，"lis"是实参 → cName
①选取页面上的所有节点
②每一个节点的class名称和参数cName作比较
③如果节点名称和lis相等，把节点添加到数组中
④最后return数组

注：步骤② 插入知识点className→获取class名称
例如：
充当class名称的 即是aaa
因此，步骤②：获取每一个节点的class名称→ dom[i] . className
强调：

这里不能设置这个属性，那么

原因在于fn(“lis”)返回的是一个数组，即需要加下标才行

所以，还要循环 [0]
注意：

这里的判断条件不严谨
解释如下：

lis和cName是相等的，因此，lis==“lis”一定相等
但是如果在前面留空格 加上ddd

那么只给一个加上背景颜色
原因在于：ddd lis不等于“lis”，所以需要把几种空格的情况都写出来

最后注意：如果要用class获取节点内容，必须要封装。
补充：

1. 通过顶层document节点获取：
   （1） document.getElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。
   （2）document.getElementsByName(elementName)：通过节点的name获取节点，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。可以通过要获取节点的某个属性来循环判断是否为需要的节点。
   （3）document.getElementsByTagName(tagName)：该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组。
   例如：document.getElementsByTagName(‘A’)将会返回页面上所有超链接节点。
   2、通过父节点获取：
   （1）parentObj.firstChild：如果节点为已知节点（parentObj）的第一个子节点，那么就可以使用这种方法。可递归使用。
   ps递归使用：即支持parentObj.firstChild.firstChild.firstChild…的形式，如此就可以获得更深层次的节点
   （2）parentObj.lastChild：这个属性是获取已知节点（parentObj）的最后一个子节点。可以递归使用。
   （3）parentObj.childNodes：获取已知节点的子节点数组，通过循环或者索引找到需要的节点。
   （4）parentObj.children：获取已知节点的直接子节点数组。
   （5）parentObj.getElementsByTagName(tagName)：返回已知节点的所有子节点中类型为指定值的子节点数组。
   3、通过临近节点获取：
   （1）neighbourNode.previousSibling:获取已知节点(neighbourNode)的前一个节点。
   （2）neighbourNode.nextSibling：获取已知节点（neighbourNode）的下一个节点，同样支持递归。
   4、通过子节点获取：childNode.parentNode：获取已知节点的父节点。