400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

JavaScriptHTMLDOM导航怎么使用

这篇文章主要介绍“JavaScript HTML DOM导航怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript HTML DOM导航怎么使用”文章能帮助大家解决问题。

创新互联-专业网站定制、快速模板网站建设、高性价比昭通网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式昭通网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖昭通地区。费用合理售后完善,十年实体公司更值得信赖。

JavaScript HTML DOM导航怎么使用

JS HTML DOM 导航

通过 HTML DOM,您能够使用节点关系来导航节点树。

DOM节点

根据 W3C HTML DOM 标准,HTML 文档中的所有事物都是节点

能够创建新节点,还可以修改和删除所有节点。

节点关系

节点树中的节点彼此之间有一定的等级关系。

eg:



   
       DOM 教程
   

  
       

DOM 第一课

       

Hello world!

   

JavaScript HTML DOM导航怎么使用

从以上的 HTML 中您能读到以下信息:

-  是根节点
-  没有父
-  是  和  的父
-  是  的第一个子
-  是  的最后一个子
**同时:**

-  有一个子:
- <title> 有一个子(文本节点):"DOM 教程"
- <body> 有两个子:<h2> 和 <p>
- <h2> 有一个子:"DOM 第一课"
- <p> 有一个子:"Hello world!"
- <h2> 和 <p> 是同胞</pre><h3>在节点之间导航</h3><p>通过 JavaScript,您可以使用以下<strong>节点属性</strong>在<strong>节点</strong>之间导航:</p><ul><li><p>parentNode</p></li><li><p>childNodes[nodenumber]</p></li><li><p>firstChild</p></li><li><p>lastChild</p></li><li><p>nextSibling</p></li><li><p>previousSibling</p></li></ul><h3>子节点和节点值</h3><p>DOM 处理中的一种常见错误是认为元素节点中包含文本。</p><p><strong>实例:</strong></p><pre><title id="demo">DOM 教程

(上面例子中的)元素节点

<strong>不包含</strong>文本。

它包含了值为 “DOM 教程” 的文本节点。

  1. 文本节点的值能够通过节点的 innerHTML 属性进行访问:

var myTitle = document.getElementById("demo").innerHTML;
  1. 访问 innerHTML 属性等同于访问首个子节点的 nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;
  1. 也可以这样访问第一个子节点:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

以下三个例子取回

元素的文本并复制到

元素中:

实例 1




我的第一张页面
Hello!

实例 2




我的第一张页面
Hello!

实例 3




我的第一张页面
Hello!

InnerHTML

我们使用 innerHTML 取回 HTML 元素的内容。

DOM 根节点

有两个特殊属性允许访问完整文档:

document.body - 文档的 body
document.documentElement - 完整文档
实例




Hello World!

DOM 很有用!

本例演示 document.body 属性。

JavaScript HTML DOM导航怎么使用
实例




Hello World!

DOM 很有用!

本例演示 document.documentElement 属性。

JavaScript HTML DOM导航怎么使用
JavaScript HTML DOM导航怎么使用

nodeName 属性

nodeName 属性规定节点的名称。

我的第一张网页
Hello!

返回H1
注释
nodeName 总是包含 HTML 元素的大写标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

nodeType 属性

nodeType 属性返回**节点的类型。**nodeType 是只读的。

实例

我的第一张网页
Hello!

返回1
最重要的 nodeType 属性是:
JavaScript HTML DOM导航怎么使用

Type 2 在 HTML DOM 中已弃用。XML DOM 中未弃用。

关于“JavaScript HTML DOM导航怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


分享标题:JavaScriptHTMLDOM导航怎么使用
文章网址:http://mzwzsj.com/article/ggiped.html

其他资讯

让你的专属顾问为你服务