DOM core(DOM核心操作)
DOM core定义了一套标准的针对任何结构化文档的对象,包括HTML、XHTML和XML。XML DOM定义了一套标准的针对XML文档的对象。HTML DOM定义了一套标准的针对HTML文档的对象。
HTML-DOM
使用JavaScript和DOM为HTML文档写脚本时,有许专属的HTML-DOM属性。
CSS-DOM
CSS-DOM是针对CSS的操作
节点与节点之间的关系
-
整个文档是一个文档节点。
-
每个HTML标签是一个元素节点
-
包含在HTML元素中的的文本是文本节点。
-
每个HTML属性是一个属性节点
-
注释属于注释节点
1.1获取节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="ris">
<p id="frist">第一个</p>
<p id="two">第二个</p>
</div>
</body>
<script>
var ris=document.getElementById("ris"); //获取节点
var chiler=ris.children //获取父节点下所有子节点
ris.firstChild; //获取父节点下第一个子节点
ris.lastChild; //获取父节点下最后一个子节点
ris.nextElementSibling; //获取下一个子节点
ris.previousElementSibling //获取上一个子节点
</script>
</html>
1.2删除节点
注意:删除多个节点的时候children是在时刻变化的,删除节点的时候一定要注意,不能一次性通过下标删除
1.3插入节点
1.4创建新标签
<body>
<p id="js">javaScript</p>
<div id="list">
<p id="se">javaSE</p>
<p id="ee">javaEE</p>
<p id="me">javaME</p>
</div>
<script>
var js=document.getElementById("js");
var list=document.getElementById("list")
// list.appendChild(js) //追加到后面
var newp= document.createElement("p"); //创建一个p标签
newp.innerText="java";
list.appendChild(newp) //追加进去
</script>
节点信息
每个节点都拥有包含节点某些信息的属性
-
nodeName(节点名称)
nodeName属性含有某个节点的名称,元素 节点的nodeName是标签名称。属性节点的nodeName是属性名称。文本节点的nodeName永远是#text。文档节点的nodeName永远是#document。
-
noneValue(节点值)
对于文本节点,nodeValue属性包含文本,对属性节点,nodeValue属性包含属性值。nodeValue属性对于文档节点和元素节点是不可用的。
-
noneType(节点类型)
nodeType属性可返回节点的类型
访问节点
通过getElement系列方法访问指定节点
-
getElementById()方法: 返回按属性查找到的第一个对象的引用。
-
getElementsByName()方法L: 按指定名称name查找对象的集合。由于一个文档中可能对有多个同名节点,所以返回的是元素数组。
-
getElementsByTagName()方法 返回指定标签名称TagName查找对象集合。由于一个文档中可能对有多个同类型的标签节点,所以返回的是元素数组。
通过节点的层次关系访问节点
属性:
在JavaScript中提供了一组可以兼容不同浏览器的element属性,可以消除因为换行或者空行无法准确访问到节点的情况。
element属性:
设置元素样式
style属性设置样式
在HTML DOM中,style是一个对象,代表一个单独的样式声明,可通应用样式的文档或者元素访问style对象,语法如下:
样式属性
text(文本):
fontSize : 设置元素的字体大小
fontWeight : 设置字体的粗细
textAlign : 排列文本
color : 设置文本的颜色
textDecoration : 设置文本的修饰
background(背景)
backgroundColor : 设置元素的背景颜色
backgroundImage : 设置元素背景图像
backgroundRepeat : 设置图和重复背景图片
padding(边距)
padding : 设置元素的填充
paddingTop : 设置元素上填充
paddingBottom : 设置元素下填充
paddingLeft : 设置元素左填充
paddingRight : 设置元素右填充
border(边框)
border : 设置四个边框的属性
borderTop : 设置上边框的属性
borderBottom : 设置下边框的属性
borderLeft : 设置组左边框的属性
borderRight : 设置右边框的属性
ClassName属性设置样式
在HTML DOM中 ,ClassName属性可设置或返回元素中的class样式
获取元素的样式
getComputedStyle() 这个方法接收两个参数,需要获取样式的属性值
currentStyle对象,它包含了所有元素的style对象的特征和任何未被覆盖的CSS规则的style特征