一篇文章带你了解JavaScript htmldom 导航

使用HTML DOM，可以使用节点关系来导航"节点树"。

创新互联专业为企业提供武平网站建设、武平做网站、武平网站设计、武平网站制作等企业网站建设、网页设计与制作、武平企业网站模板建站服务，十载武平做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

一、DOM 节点

在一个HTML文档都是一个节点，The entire document is a document node 每个HTML元素是元素节点在HTML元素的文本是文本节点每一个HTML属性是一个属性节点所有注释都是注释节点。

使用HTML DOM, 在节点树的所有节点可以通过JavaScript访问。可以创建新节点，并可以修改或删除所有节点。

1. 节点关系

节点树中的节点彼此具有层次关系。

2. 子节点和节点值

在DOM处理中常见的错误就是认为一个元素节点包含文本。

DOM Tutorial

元素节点 (在上面的实例中) 不包含文本。它包含有值的文本节点 "DOM Tutorial"。该文本节点的值可以通过节点的innerHTML属性访问。<pre><code>var myTitle = document.getElementById("demo").innerHTML;</code></pre>访问innerHTML属性访问和访问第一个子节点值相同:<pre><code>var myTitle = document.getElementById("demo").firstChild.nodeValue;</code></pre>访问第一个子节点也可以这样做:<pre><code>var myTitle = document.getElementById("demo").childNodes[0].nodeValue;</code></pre>实例1：查询<h1>元素的文本，并且拷贝它到元素。<pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>项目

My First Page

实例2：





项目




   My First Page

实例3 ：





项目


   My First Page
    Hello!

二、DOM 根节点

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

document.body - 文档主体





项目




我的第一个页面

document.documentElement - 完整的文档



  
    
    项目
  
  
  Hello World!
  
  The DOM is very useful!
   This example demonstrates the document.documentElement property.

1. nodeName 属性

nodeName属性指定一个节点的名称，nodeName 是只读的。

nodeName 是只读的。
nodeName 一个元素节点的节点名称和标签名称相同。
一个属性节点的节点名称是属性名。
一个文本节点的nodeName总是 #text。
文档的节点名称总是 #document。

My First Page

注意:

nodeName总是包含HTML元素的大写标签名称。

2. nodeValue 属性

nodeValue 属性指定节点的值。素节点的节点值是 undefined，文本节点的节点是文本本身，属性节点的节点值是属性值。

3. nodeType 属性

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

三、总结

本文基于JavaScript，介绍了页面上htmldom 导航的节点。节点和节点之间的关系，采用生动的比喻进行讲解。以及根节点的属性进行了详细讲解。通过丰富的案例，运行效果图的展示。希望能帮助读者更好的学习。

使用JavaScript 语言，方便大家更好理解，希望对大家的学习有帮助。

新闻名称：一篇文章带你了解JavaScript htmldom 导航
分享URL：http://www.mswzjz.cn/qtweb/news49/224649.html

温江区贝锐智能技术服务部_成都网站建设公司，为您提供全网营销推广、企业网站制作、网站建设、网站营销、python、网站策划

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：贝锐智能

贝锐智能技术为您推荐以下文章