DOM相关知识


文档对象模型(DOM,Document Object Model)是针对XML但经过扩展用于HTML的应用程序编程接口。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。

Node类型

DOM1级定义了一个Node接口,该接口将由DOM中的节点类型实现。这个接口在JS中是作为Node类型实现的。所有节点类型都继承自Node类型。

节点类型相关属性:
nodeType:节点类型
nodeName:与节点类型有关,元素节点保存元素的标签名
nodeValue:与节点类型有关,元素节点为空

节点关系相关属性:
childNodes:所有子节点
parentNode:父节点
previousSibling:前一个同胞节点
nextSibling:后一个同胞节点
firstChild:第一个子节点
lastChild:最后一个子节点
ownerDocument:指向文档节点。

操作节点相关方法
appendChild():在childNodes末尾添加一个节点并返回新增的节点
insertBefore():在指定节点前添加一个节点并返回新增的节点
replaceChild():替换指定节点为新节点
removeChild():移除节点
cloneNode():复制节点,参数true是深复制,false是浅复制

Document

JavaScript通过Document类型表示文档。在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。

document.documentElement引用<html>元素
document.body引用<body>元素
document.doctype引用<!DOCTYPE>元素
document.title文档标题
document.URL完整的URL
document.domain域名
document.referrer来源页面的URL

查找元素
getElementById()
getElementsByTagName()
getElementsByName() --HTMLDocument特有

文档写入
write()、writeln()、open()、close()

选择符API
querySelector()返回第一个匹配的元素。
querySelectorAll()返回所有匹配的元素。

事件

事件就是用户或浏览器自身执行的某种动作。响应事件的函数是事件处理程序。
为事件指定事件处理程序的方式:
HTML事件处理程序

<input type="button" value="Click me" οnclick="alert('clicked')"》

DOM0级事件处理程序

var btn = document.getElementById("myBtn");
btn.onclick = function(){
	alert("Clicked");
};

DOM2级事件处理程序

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
	alert("Clicked");
},false);
btn.addEventListener("click",function(){
	alert("Hello");
},false);

第三个参数为true表示在捕获阶段触发,为false表示在冒泡阶段触发。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值