文章目录
一、DOM对象模型
DOM对象全称是Document Object Model,当页面加载时,浏览器就会会创建页面文档模型,它是window五大对象之一。
一个html文档是由DOM树构成。
DOM树如下:
二、选择器
1.元素选择器
(1) id 选择器
语法: var 元素对象=document.getElementById(“id名”);
代码如下(示例):
<div id="F">
通过id选择器选择元素
</div>
<script type="text/javascript">
var div=document.getElementById("F");
</script>
运行结果如下:
(2) 标签 选择器
语法: var 元素对象=document. getElementsByTagName (“标签名”);
注意:这个标签 选择器 获取是以数组形式返回的,访问其中的元素可以以数组下标访问
代码如下(示例):
<div>
通过标签选择器选择元素1
</div>
<div>
通过标签选择器选择元素2
</div>
<script type="text/javascript">
var div=document.getElementsByTagName("div")
console.log(div);
</script>
运行效果如下:
(3) class 选择器
语法: var 元素对象名 = document.getElementsByClassName(“类名”);
注意:这个class 选择器 获取是以数组形式返回的,访问其中的元素可以以数组下标访问
<div class="div">
通过标签选择器选择元素1
</div>
<div class="div">
通过标签选择器选择元素2
</div>
<script type="text/javascript">
var div = document.getElementsByClassName("div");
console.log(div);
</script>
运行效果如下:
(4) name 选择器
语法: var 元素对象名 = document.getElementsByName(“name”);
注意:这个name 选择器一般用于获取input元素 同样该选择器获取是以数组形式返回的,访问其中的元素可以以数组下标访问
<form action="" method="">
<input type="text" name="userName" id="" value="" />
</form>
<script type="text/javascript">
var div = document.getElementsByName("userName");
console.log(div);
</script>
运行结果如下:
(5) CSS 筛选器
var 元素对象名= document.querySelector();
方法 | 描述 |
---|---|
querySelector(“标签名”) | 通过标签名筛选元素 |
querySelector(".class名") | 通过类名筛选元素 |
querySelector(".#id名") | 通过id筛选元素 |
示例:
<div>
标签选择器
</div>
<div class="a">
类名选择器
</div>
<div id="b">
id选择器
</div>
<script type="text/javascript">
var div = document.querySelector("div");
var a=document.querySelector(".a");
var b=document.querySelector("#b");
console.log(div);
console.log(a);
console.log(b);
运行结果如下:
注意:querySelector()方法只能获取一个元素对象
想要获取多个元素可以使用以下筛选器
var 元素对象名= document.querySelectorAll();
方法 | 描述 |
---|---|
querySelectorAll(“标签名”) | 通过标签名筛选元素 |
querySelectorAll(".class名") | 通过类名筛选元素 |
querySelectorAll(".#id名") | 通过id筛选元素 |
示例:
<div>
标签选择器
</div>
<div class="a">
类名选择器
</div>
<div id="b">
id选择器
</div>
<script type="text/javascript">
var div = document.querySelectorAll("div");
var a=document.querySelectorAll(".a");
var b=document.querySelectorAll("#b");
console.log(div);
console.log(a);
console.log(b);
</script>
运行结果如下
注意:querySelectorAll()返回的是一个数组元素,可以通过下标访问元素
更多css选择器用法参考:css选择器
(6) 获取特殊元素
方法 | 描述 |
---|---|
document.body; | 获取 body |
document.documentElement | 获取 html |
2.节点/元素 选择器
注意:换行符、空白也算是节点
(1) 子节点选择器
方法 | 说明 | 返回组值 |
---|---|---|
node.parentNode | 访问父节点 | 单个值 |
node.childNodes | 子节点集合 | 数组 |
node.firstChild. | 第一个子节点 | 单个值 |
node.lastChild | 最后一个子节点 | 单个值 |
node.previousSibling | 前一个兄弟节点 | 单个值 |
node.nextSibling | 后一个兄弟节点 | 单个值 |
(2) 节点属性
属性名 | 描述 |
---|---|
NodeType | 节点类型,返回1-12 |
NodeName | 节点名 |
NodeValue | 节点值 |
节点类型一共有12种
1:元素节点
2:属性节点
3:文本节点
其它标识请参考:节点类型
<ul>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var div = document.querySelector("ul").firstChild;//获取到的是换行符
console.log("节点类型"+div.nodeType);
console.log("节点名字"+div.nodeName);
console.log("节点值"+div.nodeValue)
</script>
运行结果如下
(3) 节点元素获取
方法 | 说明 | 返回组值 |
---|---|---|
element.parentElement | 访问父元素 | 单个值 |
element.children | 子元素集合 | 数组 |
element.firtElementChild. | 第一个子元素 | 单个值 |
element.lastElementChild | 最后一个子元素 | 单个值 |
element.prexiousElementSibling | 前一个兄弟元素 | 单个值 |
element.nextElementSibling | 后一个兄弟元素 | 单个值 |
3.获取元素属性
语法:元素对象.属性名 //该方法只针对行内属性
代码如下:
总结
注意 空格、制表符都算是节点元素