DOM官方定义

DOM,Document Object Model,文档对象模型,我们可以把网页中的所有“东西”看成是对象“;
DOM的官方定义:DOM可以使用脚本,动态的访问或操作,网页的仙鹤,网页外观,网页结构;

DOM的分类

核心DOM:提供了同时操作HTML文档和XML文档的公共属性和方法;
HTML DOM :针对HTML文档提供的专用的属性方法;
XML DOM :针对XML文档提供的专用的属性和方法(就业讲);
CSS DOM :提供了操作CSS的属性和方法;
Event DOM :事件对象模型;如:onclick事件,onload事件 等;

HTML节点树(不常用)

在DOM中,称为“节点”;
在HTML中,称为“标记”;
在JS中,称为“对象”;
例:如图,左边为源代码和右边为节点树
前端:JS/25/DOM官方定义,DOM分类,HTML节点树(节点关系,节点类型,),核心DOM中公共的属性和方法(节点访问,查找DOM节点,节点属性,节点的创建)

节点关系

根节点:一个HTML文档只有一个根,它就是HTML节点;
子节点:某一个节点的下级节点;
父节点:某一个节点的上级节点;
兄弟节点:两个子节点同属于一个父节点;

DOM节点类型

document文档节点:代表整个网页,不代表任何HTML标记,但它是HTML节点的父节点;
element元素节点:指任何HTML标记,每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点;
attribute属性节点:指HTML标记的属性;
text节点:是节点树的最底层节点;

核心DOM中公共的属性和方法

提示:核心DOM中查找节点(标记),都是从根节点开始的(<html>节点);

1,节点访问

nodeName :节点名称;
nodeValue :节点的值,只有文本节点才有值,元素节点没有值;
firstChild :最后一个子节点;
lastChild :最后一个子节点;
childNodes :子节点列表,是一个数组;
barentNode :父节点;

查找DOM节点(标记)

1,查找html节点
var node_html =document.firstChild;
2, 查找body节点
var node_body =node_html.lastChild;
3,查找table节点
var node_table =node_body.first
前端:JS/25/DOM官方定义,DOM分类,HTML节点树(节点关系,节点类型,),核心DOM中公共的属性和方法(节点访问,查找DOM节点,节点属性,节点的创建)
前端:JS/25/DOM官方定义,DOM分类,HTML节点树(节点关系,节点类型,),核心DOM中公共的属性和方法(节点访问,查找DOM节点,节点属性,节点的创建)
前端:JS/25/DOM官方定义,DOM分类,HTML节点树(节点关系,节点类型,),核心DOM中公共的属性和方法(节点访问,查找DOM节点,节点属性,节点的创建)

2,节点属性

前端:JS/25/DOM官方定义,DOM分类,HTML节点树(节点关系,节点类型,),核心DOM中公共的属性和方法(节点访问,查找DOM节点,节点属性,节点的创建)

3,节点的创建

createElement(tagName); 创建一个指定的HTML节点(标记);tagName:是指不带方括号的标记名;新节点创建后需加到某个父节点下;
appendChild(elementObj); 将创建的节点,追加到某个父节点下;
removeChild(elementObj); 删除子节点;
例:前端:JS/25/DOM官方定义,DOM分类,HTML节点树(节点关系,节点类型,),核心DOM中公共的属性和方法(节点访问,查找DOM节点,节点属性,节点的创建)

@沉木

相关文章: