DOM对象，控制HTML元素

灰太狼 2022-07-16 10:22 163阅读 0赞

以下内容，摘自慕课网

将HTML代码分解为DOM节点层次图:

![Center][]

## 节点属性 ##

在文档对象模型（DOM）中，每个节点都是一个对象。DOM节点有三个重要的属性：

1.  nodeName:节点的名称
2.  nodeValue:节点的值
3.  nodeType:节点的类型

一、nodeName属性：节点的名称，是只读的。

1.  元素节点的nodeName与标签名相同
2.  属性节点的nodeName是属性的名称
3.  文本节点的nodeName永远是\#text
4.  文档节点的nodeName永远是\#document

二、nodeValue属性：节点的值

1.  元素节点的nodeValue是unfined或null
2.  文本节点的nodeValue是文本自身
3.  属性节点的nodeValue是属性本身

三、nodeType属性：节点的类型，是只读的。以下常用的几种节点类型：

元素类型　　节点类型

元素  1

属性  2

文本  3

注释  8

文档  9

注意：节点之间的空白符，在大多浏览器中是文本节点。

## 访问子节点childNodes ##

访问选定元素点下的所有子节点的元素，返回的值可以看作是一个数组，他具有length属性。

#### 语法： ####

elementNode.childNodes;

#### 注意： ####

如果选定的节点没有子节点，则该属性返回不包含节点的NodeList.

#### 例子: ####

![538405fa00010e6c05630357.jpg][]

## 访问子节点的第一和最后项 ##

一、firstChild属性返回"childNodes"数组的第一个子节点。如果选定的节点没有子节点，则该属性返回NULL.

#### 语法: ####

node.firstChild

#### 说明： ####

与elementNode.childNodes\[0\]是同样的效果。

二、lastChild属性返回"childNodes"数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回NULL.

#### 语法： ####

node.lastChild

#### 说明: ####

与elementNode.childNodes\[elementNode.childNodes.length-1\]是同样的效果。

## 访问父节点parentNode ##

获取指定节点的父节点

#### 语法: ####

elementNode.parentNode

#### 注意: ####

父节点只能有一个。

#### 例子（获取父节点）: ####

<div id="text">
      <p id="con"> parentNode 获取指点节点的父节点</p>
    </div> 
    <script type="text/javascript">
      var mynode= document.getElementById("con");
      document.write(mynode.parentNode.nodeName);
    </script>

#### 访问祖节点: ####

<div id="text">  
      <p>
        parentNode      
        <span id="con"> 获取指点节点的父节点</span>
      </p>
    </div> 
    <script type="text/javascript">
      var mynode= document.getElementById("con");
      document.write(mynode.parentNode.parentNode.nodeName);
    </script>

## 访问兄弟节点 ##

1.nextSibling属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

#### 语法： ####

nodeObject.nextSibling

说明:如果无此节点，则该属性返回null.

2.previousSibling属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

#### 语法： ####

nodeObject.previousSibling

说明:如果无此节点，则该属性返回null.

#### 跳过空白文本的方法: ####

![5386e3c80001c25607010856.jpg][]

## 插入节点appendChild() ##

在指定节点的最后一个子节点列表之后添加一个新的子节点。

#### 语法： ####

appendChild(newnode)

#### 参数： ####

newnode:指定追加的节点。

#### 创建新的P标签: ####

![5398fd020001ad4905890193.jpg][]

## 插入节点insertBefore() ##

insertBefore()方法可在已有的子节点前插入一个新的子节点。

#### 语法： ####

insertBefore(newnode,node);

#### 参数： ####

newnode:要插入的新节点

node:指定此节点前插入节点。

#### 例子: ####

![5395318100010c6806960431.jpg][]

## 删除节点removeChild() ##

removeChild()方法从子节点列表中删除某个节点。如果删除成功，此方法可返回被删除的节点，如失败，则返回NULL.

#### 语法： ####

nodeObject.removeChild(node)

#### 参数: ####

node:必需，指定需要删除的节点

#### 例子: ####

![5399744d000153a306060342.jpg][]

#### 注意：把删除的子节点赋值给x,这个子节点不在DOM树中，但是还存在内存中，可通过x操作。 ####

如果要完全删除对象，给x复制null值，代码如下:

![539975a800017c8e04790082.jpg][]

## 替换元素节点replaceChild() ##

replaceChild实现子节点（对象）的替换。返回被替换对象的引用。

#### 语法： ####

node.replaceChild(newnode,oldnew)

#### 参数： ####

newnode:必需，用于替换oldnew的对象。

oldnew:必需，被newnode替换。

#### 例子： ####

![539557d70001c3ee07190429.jpg][]

#### 注意： ####

1.  当oldnode被替换时，所有与之相关的属性内容都将被移除。
2.  newnode必须先被建立。

## 创建元素节点createElement ##

createElement()方法可创建元素节点。此方法可返回一个Element对象。

#### 语法: ####

document.createElement(tagName)

#### 参数: ####

tagName:字符串值，这个字符串用来指明创建元素的类型

#### 注意: ####

要与appendChild()或insertBefore()方法联合使用，将元素显示在页面中

#### 创建一个按钮： ####

#### 用setAttribute设置属性: ####

## 创建文本节点createTextNode ##

createTextNode()方法创建新的文本节点，返回新创建的Text节点。

#### 语法： ####

document.createTextNode(data)

#### 参数： ####

data:字符串值，可规定此节点的文本。

#### 例子: ####

![53951c200001d32d07130554.jpg][]

##    网页卷去的距离与偏移量 ##

#### 图示: ####

![5347b2b10001e1a307520686.jpg][]

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。  
  
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。  
  
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

#### 注意: ####

1. 区分大小写  
  
  
2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

[Center]: /images/20220716/eb514137648140c7b5a590eb252824d9.png
[538405fa00010e6c05630357.jpg]: /images/20220716/a2d3441a693a48eaa782ccb9be49a05e.png
[5386e3c80001c25607010856.jpg]: /images/20220716/83c249621b6742f2b7afe752fb8964fc.png
[5398fd020001ad4905890193.jpg]: /images/20220716/637122cd104e40a084ee23e8f6874b30.png
[5395318100010c6806960431.jpg]: /images/20220716/e6771e9927934c598efb5419205e78df.png
[5399744d000153a306060342.jpg]: /images/20220716/921201ba3d3f48dea2e1801b1edba854.png
[539975a800017c8e04790082.jpg]: /images/20220716/c3d45d1c17d44724a8eff7875adfe9ca.png
[539557d70001c3ee07190429.jpg]: /images/20220716/d52e7292f8184647abca795985fdfc4f.png
[53951c200001d32d07130554.jpg]: /images/20220716/77636347ff2b4d60841a511142adbcbe.png
[5347b2b10001e1a307520686.jpg]: /images/20220716/85165689dbf44880838ce7adf16fb52d.png