JS笔记02
DOM（文档对象模型）
文档D
对象O
模型M
对象“O”
1、用户定义对象
2、内建对象
3、宿主对象
节点
DOM的原子是元素节点（element node）
属性节点
css
DOM并不是与网页结构打交道的唯一技术。我们还可以通过CSS告诉浏览器应该如何显示一份文档内容。
可以通过class属性选择一个元素
<p class="special">This paragraph has the special class</p>
<h2 class="special">So does this headline</h2>
css代码这么写就可以将class为“special”元素同意设置属性
.special{
fonnt-style: italic;
}
还可以通过 标签.classname
h2.special{
text-transform: uppercase;
}
ID 属性
<ul id="purchases">
#purchases{
border: 1px solid white;
background-color: #333;
color: #ccc;
padding: 1em;
}
可以通过ID为其内部元素定义样式
#purchases li {
font-weight: bold;
}
获取元素
1、getElementByid（获取元素节点ID）
document.getElementById("idname");
获取和设置属性
1、getAttribute
getAttribute是一个函数。参数是属性名称获取属性值
2、getElementsByTagName
getElementsByTagName函数获取文档中name是参数的所有元素，可以用数组方式调用
3、getElementsByClassName
getElementsByClassName用于获取文档中class是参数的所有元素，可以用数组方式调用
4、setAttribute
setAttribute函数有两个参数，分别是属性和值，用于修改对应属性的值
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/jscript" src="js/2019_9_13.js"></script>
</head>
<body>
<p id="p1">p1修改前</p>
<p id="p2"><font color="firebrick">p2修改前</font></p>
<p id="p3"><font color="magenta">p3修改前</font></p>
<p id="p4"><font color="blue">p4修改前</font></p>
<input type="button" value = "click" onclick="fun1()" />
</body>
</html>
function fun1(){
//获取标签名为“p”的所有元素放入组合a
var a = document.getElementsByTagName("p");
//将该组合中的第三个修改为双引号中的内容
a[2].innerHTML = "<P><font color='chartreuse'>修改后</font></p>";
//获取标签名为“font”的所有元素放入组合b
var b = document.getElementsByTagName("font");
//输出整个文档能够检测的“font”标签的个数
console.log(b.length);
//设置b组合中第二个标签颜色属性修改为red
b[1].setAttribute("color","red")
}
