DOM整理

DHTML的功能    //DHTML不是新语言,DNTML=HTML+css+JavaScript

动态改变页面元素

与用户进行交互等

DHTML 对象模型包括BOM和DOM

BOM和DOM

BOM:Browser Object Model,浏览器对象模型 ,用来访问和操纵浏览器窗口,使 JavaScript 有能力与浏览器“对话”

通过使用BOM,可移动窗口、更改状态栏文本、执行其它不与页面内容发生直接联系的操作

没有相关标准,但被广泛支持

DOM:Document Object Model,文档对象模型,用来操作文档

定义了访问和操作 HTML 文档的标准方法

通过对 DOM 树的操作,实现对 HTML 文档内容的操作

W3C组织定义相关的操作标准

DOM 是 W3C(万维网联盟)的标准, 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

W3C DOM 标准被分为 3 个不同的部分:

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

HTML DOM:针对HTML文档的对象模型

当网页被加载时,浏览器会创建页面的文档对象模型

通过 DOM,可以访问所有的 HTML元素,连同它们所包含的文本和属性

可以对其中的内容进行修改和删除,同时也可以创建新的元素

文档中的所有节点组成了一个文档树(或节点树)

document 对象是一棵文档树的根

节点树

整个文档是一个文档节点(document node)

每个 HTML 标签是一个元素节点 (element node)

包含在 HTML 元素中的文本是文本节点 (text node)

每一个 HTML 属性是一个属性节点 (attribute node)

注释属于注释节点(comment node)

浏览器内置的JS解释器会为载入的每一个HTML文档创建一个对应的document对象

通过document对象,可以从脚本中对HTML页面的所有的元素进行访问。

DOM1级定义了Node类型。Node类型是所有节点类型的父类型,所以Node类型提供了所有节点对象共有的基本属性和方法。

除此之外,还提供了节点关系的属性以及增加,删除节点的方法。

每种节点对应一种节点类型

Document  document节点对象的父类型

Element      所有元素节点的父类型

Attr            属性节点的类型

Text           文本节点对象的类型

Comment    注释节点对象的类型

nodeName:节点名称,String类型属性,只读

nodeType:节点类型,Number类型属性

nodeValue:节点值,String属性类型

节点间关系:父节点,子节点,兄弟节点

元素树

元素树是节点树的一个子集,只包括其中的元素节点

元素间关系

递归API

NodeIterator对象

迭代器对象:从指定对象开始,以深度优先原则,依次遍历每一个子对象,自动判断要遍历的下一节点。

var  Iterator= document。createNodeIterator(root,whattoshaw,null,false);

前两个参数

root:开始节点对象

whatToShow:NodeFilter.SHOW_ALL

NodeFilter.SHOW_ELEMENT

访问每个节点:iterator.nextNode()

返回下一个节点对象

循环遍历每个节点:2步

1. 必须先执行一次nextNode(),才是第一个节点!

2. while循环,直到nextNode()返回null为止!

while(currNode=iterator.nextNode()){//null结束

//操作当前节点对象:currNode

}

获取元素

通过元素HTML

通过元素ID名获取  document.getElementById();

通过元素标签获取  node.getElementsByTagName()

通过name属性获得取 document.getElementsByName

通过class类名获取   node.getElementsByClassName('className')

通过css获取元素

node.querySelector("selector")     //返回第一个匹配的

node.querySelectorAll(“selector”)   //返回全部匹配

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容