700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 前端:JS/25/DOM官方定义 DOM分类 HTML节点树(节点关系 节点类型 ) 核心DOM中

前端:JS/25/DOM官方定义 DOM分类 HTML节点树(节点关系 节点类型 ) 核心DOM中

时间:2023-06-24 04:50:44

相关推荐

前端:JS/25/DOM官方定义 DOM分类 HTML节点树(节点关系 节点类型 ) 核心DOM中

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节点树(重点:3,节点的创建,追加和删除)

在DOM中,称为“节点”;

在HTML中,称为“标记”;

在JS中,称为“对象”;

例:如图,左边为源代码和右边为节点树

节点关系

根节点:一个HTML文档只有一个根,它就是HTML节点;

子节点:某一个节点的下级节点;

父节点:某一个节点的上级节点;

兄弟节点:两个子节点同属于一个父节点;

DOM节点类型

document文档节点:代表整个网页,不代表任何HTML标记,但它是HTML节点的父节点;

element元素节点:指任何HTML标记,每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点;

attribute属性节点:指HTML标记的属性;

text节点:是节点树的最底层节点;

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

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

1,节点访问

nodeName :节点名称;

nodeValue :节点的值,只有文本节点才有值,元素节点没有值;nodeValue的值只能是“纯文本”,不能含有任何的HTML或CSS属性,而HTML DOM中的innerHTML包含HTML标记的所有内容,包括HTML标记等;

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

2,节点属性

3,节点的创建,追加和删除(重点)

1,节点的创建

var obj = createElement(tagName);创建一个指定的HTML节点(标记);tagName:是指不带方括号的标记名;新节点创建后需加到某个父节点下;

2,节点的追加

parentNode.appendChild(childNode);将创建的节点,追加到某个父节点下;

parentNode :代表父节点,父节点必须存在;

childNode :代表子节点;

3,节点的删除

parentNode.removeChild(childNode);删除子节点;

parentNode :代表父节点,父节点必须存在;

childNode :代表子节点;

例:

@沉木

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。