JavaScript-DOM详解

G小高

已于 2023-07-06 15:07:09 修改

阅读量169

点赞数

文章标签： javascript

于 2023-07-06 11:26:21 首次发布

本文链接：https://blog.csdn.net/Gao000210/article/details/131567974

版权

文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。

浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理解成网页的编程接口。DOM有自己的国际标准，目前的通用版本是DOM 3，DOM 4。

节点
DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

常用节点
文档节点（document）
   整个HTML文档document对象作为window对象的属性存在的，我们不用获取可以直接使用。
元素节点（Element）
   HTML文档中的HTML标签。
属性节点（Attribute)
   元素的属性表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。
文本节点（Text）
   HTML标签中的文本内容。
其他节点
   DocumentType
   doctype标签（比如<!DOCTYPE html>）

Comment
注释

DocumentFragment
文档的片段

这七种节点都属于浏览器原生提供的节点对象(下面要讲的Node对象)的派生对象，具有一些共同的属性和方法。

Node类型
DOM Level 1 描述了名为 Node 的接口，这个接口是所有 DOM 节点类型都必须实现的。Node 接口在 JavaScript中被实现为 Node 类型，在除 IE之外的所有浏览器中都可以直接访问这个类型。在 JavaScript中，所有节点类型都继承 Node 类型，因此所有类型都共享相同的基本属性和方法。

属性
nodeType

nodeType属性返回一个整数值，表示节点的类型，常用节点类型如下

节点类型                                                            对应常量
文档节点（document）                                Node.DOCUMENT_NODE
元素节点（element）                                   Node.ELEMENT_NODE
属性节点（attr） Node.ATTRIBUTE_NODE
文本节点（text）                                          Node.TEXT_NODE
文档类型节点（DocumentType） Node.DOCUMENT_TYPE_NODE
注释节点（Comment）                                    Node.COMMENT_NODE
文档片断节点（DocumentFragment）       Node.DOCUMENT_FRAGMENT_NODE

eg:
<script>
console.log(document.nodeType); //9
</script>

nodeName
nodeName属性返回节点的名称

eg:
<div id="d1">hello world</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.nodeName); //DIV
</script>

nodeValue
nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值.

eg:
<div id="d1">hello world</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.nodeValue); // null
  // 读
  console.log(div.firstChild.nodeValue); //hello world
  // 写
  div.firstChild.nodeValue = '123';
</script>

textContent
textContent属性返回当前节点和它的所有后代节点的文本内容

eg:
<div id="d1">Hello <span>JavaScript</span> DOM</div>

<script>
  var div = document.getElementById('d1');
  console.log(div.textContent); //Hello JavaScript DOM
</script>

nextSibling
nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null （注意：可能会获取到“空格”或“回车”这样的文本节点）

eg:
<div id="d1">hello</div><div id="d2">world</div>
<script>
  var div1 = document.getElementById('d1');
  var div2 = document.getElementById('d2');
  console.log(div1.nextSibling); //<div id="d2">world</div>
  console.log(div1.nextSibling === div2); // true
</script>

firstChild和lastChild
firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null，last则返回最后一个子节点。

eg:
<div id="d1">hello world<div>我是子节点</div></div>
<div id="d2"><div>我是子节点</div></div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.firstChild); // hello world
  console.log(div1.lastChild); // <div>我是子节点</div>
  var div2 = document.getElementById('d2');
  console.log(div2.firstChild); // <div>我是子节点</div>
</script>

parentNode
parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点(element)、文档节点(document)和文档片段节点(documentfragment)

eg:
<div id="d1">hello world</div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.parentNode); // body
</script>

parentElement属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null

eg:
<div id="d1">hello world</div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.parentElement); // body
  // 将父元素节点的背景颜色设置为红色
  div1.parentElement.style.backgroundColor = 'red';
</script>

childNodes
childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点

eg:
<div id="d1">hello world<div>我是子节点</div></div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.childNodes); //NodeList[text, div]
</script>

方法
appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。

eg:
<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

insertBefore
insertBefore方法用于将某个节点插入父节点内部的指定位置。
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
insertBefore方法接受两个参数，第一个参数是所要插入的节点newNode，第二个参数是父节点parentNode内部的一个子节点referenceNode。newNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode

eg:

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>
<script>
  //创建一个新的、普通的<span>元素
  var sp1 = document.createElement("span");
  // 向span标签插入内容
  sp1.innerHTML = '我是span标签'
  //插入节点之前，要获得节点的引用
  var sp2 = document.getElementById("childElement");
  //获得父节点的引用
  var parentDiv = sp2.parentNode;
  //在DOM中在sp2之前插入一个新元素
  parentDiv.insertBefore(sp1, sp2);
</script>

removeChild
removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  span1.parentNode.removeChild(span1);
</script>

replaceChild
replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。
var replacedNode = parentNode.replaceChild(newChild, oldChild);
replaceChild方法接受两个参数，第一个参数newChild是用来替换的新节点，第二个参数oldChild是将要替换走的子节点。返回值是替换走的那个节点oldChild。

eg:
<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  //创建一个新的div标签
  var div1 = document.createElement("div");
  // 向div标签插入内容
  div1.innerHTML = '我是div1标签';
  // 节点替换
  span1.parentNode.replaceChild(div1, span1);
</script>

其他方法
cloneNode()
   方法返回调用该方法的节点的一个副本.
var dupNode = node.cloneNode(deep);
node
   将要被克隆的节点
dupNode
   克隆生成的副本节点
deep 可选
   是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。

eg:
var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);

Document类型
Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document。

属性
documentElement
   始终指向HTML页面中的<html>元素。
body
   直接指向<body>元素
doctype
   访问<!DOCTYPE>, 浏览器支持不一致，很少使用
title
   获取文档的标题
URL
   取得完整的URL
domain
   取得域名，并且可以进行设置，在跨域访问中经常会用到。
referrer
   取得链接到当前页面的那个页面的URL，即来源页面的URL。
images
   获取所有的img对象，返回HTMLCollection类数组对象
forms
   获取所有的form对象，返回HTMLCollection类数组对象
links
   获取文档中所有带href属性的<a>元素

getElementById 方法
访问 HTML 元素最常用的方法是使用元素的 id。
innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

eg:
<html>
<body>
<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

G小高

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript-DOM详解

所有的节点和最终的树状结构，都有规范的对外接口。nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值.firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null，last则返回最后一个子节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null。元素的属性表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。
复制链接

扫一扫