//欢迎加我VX进群交流
vx账号：-Sep07
一、Dom
dom的全称是Document Object Model，翻译为：文档对象模型。
在Js中我们通过Dom来对HTML文档进行操作，通过学习Dom便能随心所欲的操作Web页面
D：文档，一个html就是一个文档
O：对象，表示将网页中的每一个部分都转换成一个一个对象从而进行操作
M：模型，用来表示对象之间的关系，方便获取到对象
二、节点
1.Node（节点）
Node即为节点，是指构成网页的最基本的组成部分，网页中的每一个部分都可以被称作为一个节点，但是节点的具体类型则各不相同，网页中有如下几种常用的节点：
文档节点：Html
元素节点：每一个<>标签
属性节点：每一个元素的属性
文本节点：标签中所包含的文本内容
节点的属性：如元素节点中包含的value type等属性
2.dom查询：
浏览默认提供文档节点对象，该对象是window的属性，我们可以直接使用，通过文档节点能够获取到对象，如：
document.getElementById("btn");
//该方法便是通过文档节点来获取到ID为"btn"的对象。
document.getElementsByTagName("标签名");
//该方法可以通过标签名来获取到一组对象
//class属性值查询元素的方法
var box1 = document.getElementsByClassName("box1");
//该种查询方法只支持IE9以上的浏览器
案例演示：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
//获取body标签
var body =document.getElementsByTagName("body")[0];//获取到的是一个类数组，需要添加[0]取出来
/*
可以用下列方法获取body标签，更为简便
var body = document.body;
*/
console.log(body);
//document.documentElement保存的是HTML的根标签
//document.all 查询到页面中的所有的标签
//class属性值查询元素的方法
var box1 = document.getElementsByClassName("box1"){
//只支持IE9以上的浏览器
};
}
</script>
</head>
<body>
</body>
</html>
三、DOM的其它方法：
常用的dom方法有如下几种:
qppendChild( )
添加子节点到指定节点
remoreChild( )
删除子节点
replaceChild( )
替换子节点
createElement( )
创界元素节点
createTextNode( )
创建文本节点
四、querySelector选择器
1.案例演示
在进行增删查的演示之前先学会使用querySlelctor选择器
通过使用该选择器我们可以直接使用CSS选择器的方法来查找到一个元素，如：var box1 = document.querySelector("#id1 div");
案例演示：
<html>
<head>
<meta charset="utf-8">
<
最低0.47元/天 解锁文章
396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
