剑指前端(前端入门笔记系列)——DOM(基本组成…
2019-08-14 10:03:41来源:博客园 阅读 ()
- DOM是document Object Model的缩写,简称文档对象模型(文档、模型)。这个对象就是document
- DOM的结构(页面的结构):树状结构,家族结构
- DOM的组成(成员):节点
- DOM是js操作页面的一个入口对象
- DOM可以将任何HTML和XML文档描绘成一个多层节点构成的结构
- DOM结构中的每一个成分称为一个节点,节点分为几种不同的类型,每种类型都拥有各自不同的特点、数据和方法。每个节点与其他节点存在某种关系,所以节点之间的关系构成了层次。文档节点是每个文档的根节点。<html>元素是文档节点的子节点,被称为文档元素,每个文档只能有一个文档元素
- 每一段标记都可以通过树中的一个节点来表示:元素通过元素节点来表示,特性通过特性通过特性节点来表示,文档通过文档节点来表示,而注释通过注释节点来表示,总能共有十二种类型,这些类型都继承自一个基类型。
- HTML中,文档元素始终是<html>元素
- XML中,没有预定义的元素,因此任何元素都可能成为文档元素
- Node.ELEMENT_NODE //元素节点对应的常量,对应数字值1
- Node.ATTRIBUTE_NODE //属性节点对应的常量,对应数字值2
- Node.TEXT_NODE //文本节点对应的常量,对应数字值3
- Node.CDATA_SECTION_NODE //CDATA区段对应的常量,对应数字值4
- Node.ENTITY_REFERENCE_NODE //实体引用元素对应的常量,对应数字值5
- Node.ENTITY_NODE //实体对应的常量,对应数字值6
- Node.PROCESSING_INSTRUCTION_NODE //表示处理指令对应的常量,对应数字值7
- Node.COMMENT_NODE //注释节点对应的常量,对应数字值8
- Node.DOCUMENT_NODE //最外层的根节点对应的常量,对应数字值9
- Node.DOCUMENT_TYPE_NODE //<!DOCTYPE………..>对应的常量,对应数字值10
- Node.DOCUMENT_FRAGMENT_NODE //文档碎片节点对应的常量,对应数字值11
- Node.NOTATION_NODE //DTD 中声明的符号节点对应的常量,对应数字值12
- 自身信息
<div id="box"></div> <script type="text/javascript"> var oBox = document.getElementById("box"); if(oBox.nodeType == Node.ELEMENT_NODE){ console.log("元素节点"); }else { console.log("不是元素节点"); } </script>
<div id="box"></div> <script type="text/javascript"> var oBox = document.getElementById("box"); if(oBox.nodeType == 1){ console.log("元素节点"); }else { console.log("不是元素节点"); } </script>
- 节点关系
-
- 父子关系
<div id="box"> <p>段落1</p> <p>段落2</p> <!--注释123--> <p>段落3</p> </div> <script type="text/javascript"> var oBox = document.getElementById("box"); var firstChild_1 = oBox.childNodes[0]; var firstChild_2 = oBox.firstChild; var firstChild_3 = oBox.childNodes.item(0); var lastChild = oBox.lastChild; var count = oBox.childNodes.length; console.log("所有子节点:" , oBox.childNodes); console.log("第一个子节点:" , firstChild_1); console.log("第一个子节点:" , firstChild_2); console.log("第一个子节点:" , firstChild_3); console.log("最后一个子节点:" , lastChild); console.log("子节点的数量:" , count); </script>
<div id="box"> <p class="p1">段落1</p> <p>段落2</p> <!--注释123--> <p>段落3</p> </div> <script type="text/javascript"> var oP= document.getElementsByClassName("p1")[0]; var parent = oP.parentNode; console.log("父节点为:" , parent); </script>
-
- 兄弟关系
<div id="box"> <p class="p1">段落1</p> <span></span> <h1>段落2</h1> <!--注释123--> <p>段落3</p> </div> <script type="text/javascript"> var oP= document.getElementsByClassName("p1")[0]; var preSibling = oP.previousSibling; var nextSibling = oP.nextSibling; console.log("前一个兄弟节点为:" , preSibling); console.log("后一个兄弟节点为:" , nextSibling); </script>
原文链接:https://www.cnblogs.com/AI-fisher/p/11115606.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:Three.js
- javascript面向对象入门基础详细介绍 2020-03-29
- js调用刷新界面的几种方式 2020-03-05
- 高性能JavaScript循环语句和条件语句 2020-02-21
- Javascript实现前端简单的路由实例 2019-12-17
- 带你了解JavaScript 2019-10-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash