《Web前端基础》课件-任务7：学习DOM模型 节点基础_第1页
《Web前端基础》课件-任务7：学习DOM模型 节点基础_第2页
《Web前端基础》课件-任务7：学习DOM模型 节点基础_第3页
《Web前端基础》课件-任务7：学习DOM模型 节点基础_第4页
《Web前端基础》课件-任务7：学习DOM模型 节点基础_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

节点基础如何理解节点及其作用？节点：网页中的所有内容在文档树中都是节点，即元素、属性、文本等都属于节点。作用：当利用DOM进行网页开发时，通过操作节点可以更加灵活地实现网页中的交互效果。本节针对节点的属性和层级进行讲解。1节点的属性节点有3个常用属性，具体如下。1节点的属性nodeName：用于获取节点名称，全大写形式，如<div>标签的节点名称为DIV。nodeValue：用于获取节点值，一般适用于文本、注释类型的节点。nodeType：用于获取数字表示的节点类型，如1表示元素节点。常见的节点类型如下。类型常量常量的值元素节点

Node.ELEMENT_NODE1文本节点Node.TEXT_NODE3注释节点Node.COMMENT_NODE8文档节点Node.DOCUMENT_NODE9文档类型节点Node.DOCUMENT_TYPE_NODE101节点的属性在实际开发中，开发者可以根据节点的3个常用属性获取节点的名称、值和类型，示例代码如下。1节点的属性varnode=document.body; //获取body节点console.log(node.nodeName); //获取节点名称，输出结果：BODYconsole.log(node.nodeValue); //获取节点值，输出结果：nullconsole.log(node.nodeType); //获取节点类型，输出结果：1有这样一个问题：节点操作时，页面中有一个<div>标签，那么这个<div>标签在DOM中是元素还是节点呢？答案：既可以将它称为div元素，也可以将它称为div节点。1节点的属性元素是节点的一种类型，即元素节点。从程序角度来说，节点的构造函数是Node，元素的构造函数是Element，Element继承Node。Tip2节点的层级不同节点可以划分为不同层级，比如根节点、父节点、子节点、兄弟节点，节点层级示例代码如下。<!DOCTYPEhtml><html><head><title>测试</title></head><body><ahref="#">链接</a><p>段落...</p></body></html>2节点的层级依据层级结构对代码中的节点进行介绍。根节点：document节点是整个文档的根节点，它的子节点包括文档类型节点和html元素。父节点

：它是指某一节点的上级节点，例如，html元素是head元素和body元素的父节点，body元素是a元素和p元素的父节点。子节点：它是指某一节点的下级节点，例如：head元素和body元素是html元素的子节点，a元素和p元素是body元素的子节点。兄弟节点：它是指同属于

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论