文档对象模型DOM（Document Object Model）为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。
目的就是为了能让JS操作HTML元素而制定的一个规范。
处理网页内容的方法和接口
浏览器对象模型BOM，有很大兼容性问题。
与浏览器交互的方法和接口
DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点数）。
HTML文档可以说由节点构成的集合，三种常见的DOM节点：
1.元素节点：<HTML>、<body>、<p>等，即标签
2.文本节点：<li>...</li>中的JavaScript、DOM、CSS等向用户展示的内容/文本
3.属性节点：<a>标签的链接属性href="http://www.baidu.com"等元素属性
<a href="http://www.baidu.com">JavaScript DOM</a>
元素节点：a
属性节点：href="http://www.baidu.com"
文本节点：JavaScript DOM
-
通过ID获取元素
document.getElementById("id")
（获取的元素是一个对象，如想对元素进行操作，要通过它的属性或方法）
结果：null 或 [object HTML ParagraphElement] -
innerHTML属性
Object.innerHTML
（Object是获取的元素对象）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="con">Hello World!</p>
<script>
var mycon= document.getElementById("con");
console.log("p标签原始内容:"+mycon.innerHTML);
//输入元素内容
mycon.innerHTML= "123";
console.log("p标签修改后内容:"+mycon.innerHTML);
</script>
</body>
</html>
结果：123
- 改变HTML样式
Object.style.property=new style;
（Object是获取的元素对象）
基本属性表：
backgroundColor（设置元素的背景颜色）
height （设置元素的高度）
weight （设置元素的宽度）
color （设置元素的颜色）
font （在一行设置所有的字体属性）
font family （设置元素的字体系列）
font size （设置元素的大小）
等
- 显示和隐藏（display属性
Object.style.display=value
value取值：
none （此元素不会被显示（即隐藏））
block （此元素显示为块级元素（即显示））
- 控制类属性（className属性）
设置或返回元素的class属性（有兼容问题ie6,7,8不兼容）
object.className= classname
作用：
1.获取元素的class属性
2.为网页内的某个元素制定一个css样式来更改该元素的外观
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one {
width: 200px;
background-color: #8A25C6;
}
.two {
background-color: #C81623;
}
</style>
</head>
<body>
<p id="con" class="one">Hello World!</p>
<button onclick="changeCon()">点击</button>
<script>
var mycon= document.getElementById("con");
function changeCon(){
mycon.className="two";
}
</script>
</body>
</html>
结果：
image.png
image.png
封装自己的类（解决className不兼容问题）
笔试可能会考
原理：要取出所有的盒子，利用遍历的方法，通过每一个盒子的className来判断。如果相等就留下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #008000;
margin-bottom: 10px;
}
</style>
<script>
window.onload = function(){
//封装自己class类名
function getClass(classname){
//如果浏览器支持，则直接返回
if(document.getElementsByClassName){
return document.getElementsByClassName(classname);
}
//不支持的浏览器
var arr = []; //用于存放满足的数组
var dom = document.getElementsByTagName("*");
for(var i= 0,len= dom.length;i<len;i++){
if(dom[i].className == classname){
arr.push(dom[i]);
}
}
return arr;
}
console.log(getClass("a").length);
}
</script>
</head>
<body>
<div></div>
<div class="a"></div>
<div></div>
<div class="a"></div>
<div></div>
<div></div>
<div class="a"></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
结果：3
网友评论