DOM的理解与 *** 作

有一定的JS基础后，就可以进入 dom 环节了，dom使得网页的交互效果得到完美呈现，可以说dom真正打开了网页和用户之间的通道桥梁，日常生活中我们点击鼠标，敲击键盘，甚至于无意间触碰到屏幕（触摸屏），都会或多或少或大或小的得到一些躲藏起来的内容。

打开淘宝，在输入框输入商品时，下拉的推荐商品：

或是当打开某个不想再浏览的网页时，右上角的那个×：

这些大部分都存在DOM的身影。

这里的“DOM”，通常来讲，叫做 DOM 文档对象模型 ， 通过 *** 纵DOM，可以随意更改内容，样式，或者增删改查 ，因为网页是在浏览器中显示的，整个浏览器是BOM，所以DOM其实是BOM的一部分，BOM 就是 window对象 ，DOM 就是 document（文档）对象。

如果该元素，是网页的必备元素，而且只能有一个，可以通过document对象直接获取。比如：的src属性：

任由我们怎么去修饰的显示，但它本身的路径属性是独有的，所以我们可以直接获取：

更多的时候，我要需要获取网页中的指定元素，这就需要专门的方法来获取了，这里列举几个方法：

getElementById()方法，根据元素的id属性值来获取指定的元素，因为ID的唯一性，使得该方法需要搭配ID选择器使用，如果网页里ID重复时，它会获取第一个：

getElementsByTagName()方法，根据元素的标签名获取所有该元素，该方法获取的是所有该标签的元素，以伪数组的形式呈现：

getElementsByClassName()方法，根据元素的类选择器名称获取所有该元素，该方法获取的途径是标签的类，也就是class属性，由于拥有该属性的标签可能不只一个，所以该方法获得的也是一个伪数组（还有，可以看方法名，凡是带Elements的大多数都是伪数组）：

getElementsByName()方法，根据元素的name属性值获取所有该元素，相同的性质，有name属性的标签也不少：

querySelector()方法，根据选择器的名称返回元素，如果有多个元素，只返回第一个元素，这个方法就比较常用了，而且IE这个啥也不咋适配的浏览器现在几乎不咋能见到了，可以多多考虑用他了该方法是  ES6新增，无论是ID 还是class都可以选，但是和上面区别的是选ID时前面要加#号，选class时前面要加“”：

区别于Elements，这里是个单数，所以只会获取一个，要是想获取多个相同的，就用querySelectorAll()吧！querySelectorAll()看这个ALL就知道它是用来选全部的：

最后这俩方法更实用，可以选取CSS几乎所有选择器，而且querySelectorAll()得到的数组数据后还可以使用数组的方法。

*** 作DOM的样式 ，有多种方式：

通过style属性直接设置

通过className属性设置类选择器

也可以通过classList属性添加多个类选择器

*** 作DOM的内容：

innerText属性，用于获取 和 *** 作 DOM的文本内容。

innerHTML属性，用于获取 和 *** 作 DOM的HTML内容：

createElement()方法，用于创建DOM元素：

appendChild()方法，用于在当前DOM元素中添加子元素：

自删 remove()方法，是元素删除自己:

通过父级删除子级 removeChild()方法，是删除元素里面指定的子元素:

// 获得根节点

Element root = documentgetRootElement();

// 遍历所有movie节点

for (Iterator<Element> itemMovie = rootelementIterator(); itemMovie

hasNext();) {

// 得到movie节点

Element movie = itemMovienext();

// 遍历遍历movie下的所有节点

for (Iterator<Element> itemInfo = movieelementIterator(); itemMovie

hasNext();) {

// 得到movie下的所有节点

Element info = itemInfonext();

// 如果当前节点为 biao

if (infogetName()equals("biao")) {

// 遍历当前biao

for (Iterator<Element> biaoInfo = infoelementIterator(); itemMovie

hasNext();) {

// 得到item中文本值

Systemoutprintln(biaoInfonext()getText());

}

}

}

这样：

<script type="text/javascript">

     $(function () {

         $("#div1")next()addClass("am-active"); 获得div1的下一个元素

         $("#div1")next()find("dd")addClass("am-in");   获得div1下一个元素的 指定子元素

})     

 </script>

扩展资料：

注意事项

通常，选择一个元素很简单，$("#id")就可以搞定，但是如果想选择某个id为x1的div下的某个id为x2的元素就很困难了，可以通过用find来解决这个问题。

例如：

html代码如下：

<div id="test">

  <div id="div1">第一行</div>

  <div id="div2">

      <p id="p1">第1行</p>

      <p id="p2">第2行</p>

      <p id="p3">第3行</p>

  </div>

  <div id="div3">第三行</div>

</div>

请参照 css3 伪类选择器；

:first-child

选择某个元素的第一个子元素（IE6不支持）

:last-child

选择某个元素的最后一个子元素

:first-of-type

[CSS3]选择一个上级元素下的第一个同类子元素

:last-of-type

[CSS3]选择一个上级元素的最后一个同类子元素

:only-child

[CSS3]选择的元素是它的父元素的唯一一个了元素（IE6-8不支持）

:only-of-type

[CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素（IE6-8不支持）

:nth-child()

[CSS3]选择某个元素的一个或多个特定的子元素（IE6-8不支持）

:nth-last-child()

[CSS3]选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算（IE6-8不支持）

:nth-of-type()

[CSS3]选择指定的元素（IE6-8不支持）

:nth-last-of-type()

[CSS3]选择指定的元素，从元素的最后一个开始计算（IE6-8不支持）

<div id="test">

<div></div>

<div></div>

</div>

<script>

function dom() {

var s= documentgetElementById("test");

var chils= schildNodes; //得到s的全部子节点

var par=sparentNode; //得到s的父节点

var ns=snextSbiling; //获得s的下一个兄弟节点

var ps=spreviousSbiling; //得到s的上一个兄弟节点

var fc=sfirstChild; //获得s的第一个子节点

var lc=slastChile; //获得s的最后一个子节点

}

</script>

dom访问元素节点的方法：1 getElementById(): 通过元素id访问元素；2 getElementsByTagName(): 通过标签名访问元素；3 getElementsByClassName(): 通过class名访问元素；4 querySelector(): 通过css选择器访问元素；5 querySelectorAll(): 通过css选择器访问元素，获取到的是一个NodeList；6 getAttribute(): 获取元素的属性；7 setAttribute(): 设置元素的属性；8 removeAttribute(): 删除元素的属性；9 hasAttribute(): 检查元素是否具有某个属性；10 createElement(): 创建元素；11 appendChild(): 向元素节点添加子节点；12 removeChild(): 从元素节点移除子节点；13 replaceChild(): 用新节点替换旧节点；14 insertBefore(): 在指定子节点前插入新节点；15 cloneNode(): 复制元素节点；16 parentNode(): 获取元素的父节点；17 nextSibling(): 获取下一个兄弟节点；18 previousSibling(): 获取上一个兄弟节点；19 firstChild(): 获取第一个子节点；20 lastChild(): 获取最后一个子节点。

拓展：HTML标签的换行可以使用

标签，这个标签是用来换行的，在HTML中使用

即可实现换行效果。

1 通过顶层document节点获取：

（1） documentgetElementById(elementId) ：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。

如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是节点的id。这个方法可以看作是documentgetElementById()的另外一种写法，不过$()的功能更为强大，具体用法可以参考它们各自的API文档。

（2）documentgetElementsByName(elementName) ：该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。

例如：在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可。

（3）documentgetElementsByTagName(tagName) ：该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组，例如：documentgetElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前，一般都是知道节点的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。那么，这个方法是不是就没有用处了呢？当然不是，这个方法和上面的两个不同，它不是document节点的专有方法，还可以应用其他的节点，下面将会提到。

2、通过父节点获取：

（1）parentObjfirstChild ：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObjfirstChildfirstChildfirstChild的形式，如此就可以获得更深层次的节点。

（2）parentObjlastChild ：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样，它也可以递归使用。

在使用中，如果我们把二者结合起来，那么将会达到更加令人兴奋的效果，即：parentObjfirstChildlastChildlastChild

（3）parentObjchildNodes ：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。

注意 ：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox20011上获取的是所有子节点即包括子节点的子节点。

（4）parentObjchildren ：获取已知节点的直接子节点数组。

注意 ：经测试，在IE7上，和childNodes效果一样，而Firefox20011不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。

（5）parentObjgetElementsByTagName(tagName) ：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：parentObjgetElementsByTagName('A')返回已知的子节点中的所有超链接。

3、通过临近节点获取：

（1）neighbourNodepreviousSibling ：获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。

（2）neighbourNodenextSibling ：获取已知节点（neighbourNode）的下一个节点，同样支持递归。

4、通过子节点获取：

（1）childNodeparentNode ：获取已知节点的父节点。

上面提到的方法，只是一些基本的方法，如果使用了Prototype等JavaScript库，可能还获得其他不同的方法，例如通过节点的class获取等等。不过，如果能够灵活运用上面的各种方法，相信应该可以应付大部分的程序。

注意这是转载的文档：其中通过firstChild和lastChild获得HTML Node是不可取的。因为，根据浏览器的不同，firstChild有可能返回parentObj的属性对象。

以上就是关于DOM的理解与 *** 作全部的内容，包括:DOM的理解与 *** 作、Dom解析xml文件时，子节点的子元素节点数组怎么表示出来、jquery获取指定元素下的子元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！