html实现导航栏,html页面导航
本文给大家带来了一些关于javascript的知识，主要介绍了HTML DOM导航的相关问题。来看看吧，希望对你有帮助。
【相关推荐：javascript视频教程，web前端】
JS HTML DOM 导航
使用HTML DOM，您可以使用节点关系来导航节点树。
DOM节点
根据W3C HTML DOM标准，所有事物都是节点在HTML文档中：
整个文档是一个文档节点，每个HTML元素是一个元素节点，HTML元素中的文本是一个文本节点，每个HTML属性是一个属性节点，所有评论都是评论节点。
使用HTML DOM，可以通过JavaScript访问节点树中的所有节点。您可以创建新节点，修改和删除所有节点。
节点关系
节点树中的节点彼此具有特定的层级关系。
术语(父、子和兄弟、父、子和兄弟)用于描述这些关系。在节点树中，顶部节点称为根(根节点)。每个节点都有一个父节点，除了根节点(根节点没有父节点)。可以有一定数量的子节点(兄弟或姐妹)的节点是指具有相同父节点的节点eg:。
超文本标记语言
头
TitleDOM教程/标题
/头
身体
H1DOM第1课/h1
费罗世界！/p
/body
/html
您可以从上面的HTML中读取以下信息：
-html是根节点。
-html没有父级。
-html是头和身体之父
-head是html的第一个孩子
-body是html的最后一个子元素
* *同时：* *
-头有个儿子：标题
-title有一个子节点(文本节点):“DOM Tutorial”
-body有两个孩子：h1和p。
-h1有一个孩子：“DOM第一课”
——p有个儿子：‘你好世界！’
-h1和P是兄弟
在节点之间导航
用JavaScript，可以用下面的节点属性在节点之间导航：
父节点子节点[节点号] firstchildchildtextsibling上一页
子节点和节点值
DOM处理中的一个常见错误是元素节点包含文本。
实例：
Title= demo DOM tutorial /title(在上面的例子中)元素节点
strong不包含/strong文本。它包含一个值为“DOM Tutorial”的文本节点。
文本的值可以通过节点的innerHTML属性访问：var my title=document . getelementbyid( demo )。innerhtml访问innerHTML属性等同于访问第一个子节点的nodevalue:var my title=document . getelementbyid( demo )。firstchild.nodevalue也可以像这样访问第一个子节点：var my title=document . getelementbyid( demo )。子节点[0]。nodevalue以下三个示例检索
元素的文本并复制到
元素：
实例 1
超文本标记语言
身体
H1 id=id01 我的第一页/h1
p id=id02 您好！/p
脚本
document.getElementById(id02 )。innerHTML=document . getelementbyid( id01 )。innerHTML
/脚本
/body
/html实例 2
超文本标记语言
身体
H1 id=id01 我的第一页/h1
p id=id02 您好！/p
脚本
document.getElementById(id02 )。innerHTML=document . getelementbyid( id01 ). first child . nodevalue；
/脚本
/body
/html实例 3
超文本标记语言
身体
H1 id=id01 我的第一页/h1
p id=id02 您好！/p
脚本
document.getElementById(id02 )。innerHTML=document . getelementbyid( id01 )。子节点[0]。nodeValue
/脚本
/body
/HTML
InnerHTML
我们使用innerHTML来检索HTML元素的内容。
DOM 根节点
有两个特殊属性允许访问整个文档：
文档的主体
document . document element-完成文档实例
超文本标记语言
身体
费罗世界！/p
差异
PDOM很有用！/p
这个例子演示了bdocument.body/b属性。/p
/div
脚本
alert(document . body . innerhtml)；
/脚本
/body
/html实例
超文本标记语言
身体
费罗世界！/p
差异
PDOM很有用！/p
这个例子演示了bdocument.documentElement/b属性。/p
/div
脚本
alert(document . document element . innerhtml)；
/脚本
/body
/html
nodeName 属性
nodeName属性指定节点的名称。
NodeName是只读的。元素节点的nodeName相当于标签名。属性节点的nodeName是属性的名称。Nodename总是# Nodename总是# document实例：h1 ID= id01 我的第一个网页/h1
p id=id02 您好！/p
脚本
document.getElementById(id02 )。innerHTML=document . getelementbyid( id01 )。nodeName
/script返回H1注释:
NodeName总是包含HTML元素的大写标记名。
nodeValue 属性
nodeValue属性指定节点的值。
元素的nodeValue是未定义的文本节点，文本属性节点的NodeValue是属性值
nodeType 属性
nodeType属性返回* *节点的类型。**nodeType是只读的。
实例
H1 id=id01 我的第一个网页/h1
p id=id02 您好！/p
脚本
document.getElementById(id02 )。innerHTML=document . getelementbyid( id01 )。nodeType
/script返回1最重要的 nodeType 属性是：。
【相关推荐：javascript视频教程，web前端】以上是JavaScript HTML DOM导航的详细内容(总结和分享)。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。