一、DOM的分类
核心DOM:指提供了操作HTML和XML文档的各种属性,定义一些公共的属性和方法
XML DOM:指针对XML操作的接口,也是一些属性和方法
HTML DOM:指针对HTML文档操作的接口,也是一些属性和方法
Event DOM:指事件对象模型,提供一些常用的事件
CSS DOM:指让js去操作和访问CSS的各种属性
二、Document对象
title属性:操作当前文档的标题
function getTitle(){
alert(document.title);
}
function setTitle(){
document.title="标题";
}
URL属性:返回当前文档的URL
function func(){
alert(document.URL);
}
write()方法:向文档写文本、HTML表达式或JavaScript代码
document.write("前端程序员<br />");
三、DOM的节点操作
1、整个文档是一个文档节点(Document)
2、每个HTML标签是一个元素节点(Element)
3、包含在HTML元素中的文本是文本节点(Text)是指最底层的节点,下面不能再有其它子节点
4、每个HTML属性是一个属性节点(Attribute)是指元素中所有的属性构成的节点列表,一个标记有多个属性
一个HTML文档只有一个根元素,就是<html>标记
父节点:指当前节点的上一级元素
子节点:指当前节点的下一级元素
兄弟节点:指相邻的两个节点,同属于一个父节点
如:<html>
<head>
<title>文档标题</title>
</head>
<body>
<h1>我的标题</h1>
<a href="https://blog.csdn.net/k010107?type=blog">我的博客链接</a>
</body>
</html>
5、CSS属性值和DOM的style属性值之间的映射
小结
节点操作:访问、属性、创建
1、节点的访问:firstChild、lastChild、childNodes、parentChild(父子节)
可以使元素对象的方法进行替换:getElementByld()、getElementsByTagName()
2、节点属性的操作:setAttribute()、removeAttribute()、getAttribute()
3、节点的创建、删除、追加:
创建节点:document.createElement(tagName)
复制节点:A.cloneNode(true/false);复制A节点(true完全复制false节点自身)
删除节点(注:必须父节点下的子节点才能被删除):parentObj.removeChild(nodeObj);
追加节点:parentObj.appendChild(nodeObj);
插入节点:parentObj.insertBefore(new,current);
兄弟节点
上一个兄弟节点:previousElementSibling
下一个兄弟节点:nextElementSibling
第一个兄弟节点:firstNode
最后一个兄弟节点:lastNode
补充:元素对象的属性
tagName:取一个标记的名称,同nodeName一样;
innerHTML:指标记对中的HTML文本(含有HTML标记的文本),一般指双边标记;
style:对应HTML标记的style属性;
id:对应HTML标记的id属性;