JavaScriptBOM对象(一)

DOM是什么?
DOM本质上是一种接口(API),是专门操作网页内容的API标准 。DOM把整个页面映射为一个多层节点结构,HTML或XML页面中的每个组成部分都是某种类型的节点。借助DOM提供的API,可以删除、添加、替换或修改任何节点网页上的标签是一层层嵌套的,最外面的一层是,文档对象模型也这样一层层嵌套着,但是通常被理解成一棵树的形状。树根是window或document对象,相当于最外层的标签的外围,也就是整个文档。树根之下(这棵树的图通常是倒着画,就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先)是子一级的对象,子对象也有它自己的子对象,除了根对象以外,所有的对象都有自己的父对象,同一对象的子对象之间就是兄弟的关系。
在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中,每个网页元素都可以被确切地定位。文档对象模型把整张网页组织成这样的一个树状的结构,树结构中的每一个元素都被视为一个节点(node)。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。
下面是一张树形图
在这里插入图片描述
网页中每项内容(元素,文本,属性,注释…),都是树上的一个节点对象。
唯一的树根节点: document 所有节点都有的三个属性:
nodeType: 节点类型
document 9
element(元素) 1
attribute(属性) 2
text(文本) 3
注释 8

nodeName: 节点名称
document #document
element (元素) 全大写标签名
attribute (属性) 属性名——不常用!
text (文本) #text
注释 #comment

nodeValue: 节点值 ——不常用
document null
element (元素) null
attribute(属性) 属性值
text(文本) 文本内容
注释 注释里面的内容

查找HTML里面的内容
id查找:
var id = document.getElementById(“id”)
返回值: 一个元素如果找不到返回null! 只能在document上调用
标签名查找:
var tagname = parent.getElementsByTagName(“标签名”)
返回值: 多个元素的集合如果找不到返回空集合可在任意父元素上调用
name查找:
var name = document.getElementsByName(“name”)
返回值: 多个元素的集合 如果找不到返回空集合只能在document上调用
class查找:
var class = parent.getElementsByClassName(“class”)
返回值: 多个元素的集合 如果找不到返回空集合
可在任意父元素上调用只要元素的一个class名匹配,就能找到该元素

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值