宿主对象——DOM,BOM
文章目录
DOM是什么
DOM的全称是文档对象模型。
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
- 文档:表示的是整个HTML网页文档
- 对象:对象表示将
网页中
每一个部分转换成一个对象,所有可见的都是对象。 - 模型:使用模型可以表示对象之间的关系,这样方便我们获获取对象。
eg:模型
模型就是体现节点与节点之间的关系。
DOM的使用
DOM的作用就是通过对象和模型用来操作网页的。
由于模型连接了全局的元素,所以只要我们获取一个对象然后通过模型就可以访问全部的对象。
浏览器已经为我们提供文档节点对象,这个对象是window的属性,可以在页面中直接使用,文档节点代表的是整个网页。
- 文档节点对象
<script type="text/javascript">
console.log(document);
</script>
输出:
- 通过文档节点对象获取元素
调用 getElementById()
方法
<body>
<button id="btn">按钮</button>
<script type="text/javascript">
console.log(document);
var btn = document.getElementById("btn");
console.log(btn);
</script>
</body>
输出:
- 通过文档节点对象修改获取到的元素
需要使用innerHTML
获取元素的内容从而进行修改
var btn = document.getElementById("btn");
console.log(btn.innerHTML);
btn.innerHTML = "Button";
输出:
同时页面元素:
节点
节点:Node——构成HTML文档最基本的单元。
常用节点分为四类
- 文档节点:整个HTML文档
- 元素节点:HTML文档中的HTML标签
- 属性节点∶元素的属性
- 文本节点:HTML标签中的文本内容
节点的属性:
DOM方法
DOM查询——获取元素节点
getElementById()
: 通过id属性获取一个元素节点对象getElementsByTagName()
: 通过标签名获取一组元素节点对象getElementsByName()
: 通过name属性获取一组元素节点对象
练习:图片的切换
实现效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 580px;
margin: 50px auto;
padding: 10px;
background-color: rgb(247, 223, 227);
/* 居中 */
text-align: center;
}
img{
width: 100%;
height: 326px;
/* 根据正常比例对图片进行裁剪,前提是定义好图片的长宽,这样他才会有参照去进行裁剪 */
object-fit: cover;
}
</style>
<script>
window.onload = function(){
// 点击按钮切换图片:
// 获取按钮对象
var prev = document.getElementById("prev");
var next = document.getElementById("next");
// 预处理
// 获取图片对象,(想要获取一个元素,而不是集合,所以获取指定索引即可)
var img = document.getElementsByTagName("img")[0];
// 存取所有图片路径
var imgs =["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
// 创建变量,记录索引
var index = 0;
// 设置上面的初始数字.
var info = document.getElementById("info");
info.innerHTML = (index+1)+"/"+imgs.length;
// 绑定事件
prev.onclick = function(){
index--;
if(index < 0){
index = imgs.length-1;
}
img.src = imgs[index];
// 设置图片上面地数字
info.innerHTML = (index+1)+"/"+imgs.length;
}
next.onclick = function(){
// 修改元素的属性就是:元素.属性 = 值;
index++;
if(index >= imgs.length){
index = 0;
}
img.src = imgs[index];
// 设置图片上面地数字
info.innerHTML = (index+1)+"/"+imgs.length;
}
}
</script>
</head>
<body>
<div id = "outer">
<p id = "info"></p>
<img src="img/1.jpg" alt="1">
<button id = "prev">上一张</button>
<button id = "next">下一张</button>
</div>
</body>
</html>
DOM查询——获取元素子节点
getElementsByTagName()
:方法,返回当前节点的指定标签名后代节点childNodes
:属性,表示当前节点的所有子节点children
:属性,表示当前节点的所有子元素firstChild
:属性,表示当前节点的第一个子节点firstElementChild
:属性,表示当前节点的第一个子元素lastChild
:属性,表示当前节点的最后一个子节点
元素 != 结点: 元素就是标签,而结点包含页面中的所有对象,包含空行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
</style>
<script>
window.onload = function(){
// 获取city 下的所有 li 结点
var but = document.getElementById("but");
but.onclick = function(){
var city = document.getElementById("city");
var lis = city.getElementsByTagName("li");
for(var i = 0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
// 获取city 下的所有 子 结点
var but = document.getElementById("but1");
but.onclick = function(){
var city = document.getElementById("city");
/*
childNodes属性会获取包括文本节点在呢的所有节点根据DOM标签标签间空白也会当成文本节点
注意:在IE8及以下的浏览器中,不会将空白文本当成子节点,所以该属性在工E8中会返回4个子元素而其他浏览器是9个
*/
var cns = city.childNodes;
for(var i = 0;i<cns.length;i++){
alert(cns[i].innerHTML);
}
}
// 获取city 下的所有 子 元素
var but = document.getElementById("but2");
but.onclick = function(){
var city = document.getElementById("city");
var cns = city.children;
for(var i = 0;i<cns.length;i++){
alert(cns[i].innerHTML);
}
}
// 获取city 下的第一个子结点(包含空格)
var but = document.getElementById("but3");
but.onclick = function(){
var city = document.getElementById("city");
var fir = city.firstChild;
alert(fir.innerHTML);
}
// 获取city 下的第一个子元素
var but = document.getElementById("but4");
but.onclick = function(){
var city = document.getElementById("city");
var fir = city.firstElementChild;
alert(fir.innerHTML);
}
}
</script>
</head>
<body>
<div>
<ul id ="city">
<li id = "bj">北京</li>
<li id = "sh">上海</li>
<li id = "dj">东京</li>
<li id = "se">首尔</li>
</ul>
<button id="but">点击获取 city 的 li 元素</button>
<br><br>
<button id="but1">点击获取 city 子节点</button>
<br><br>
<button id="but2">点击获取 city 子元素</button>
<br><br>
<button id="but3">点击获取 city 的第一个子节点</button>
<br><br>
<button id="but4">点击获取 city 的第一个子节点</button>
<br><br>
</div>
</body>
</html>
输出:
DOM查询——获取元素父节点、兄弟节点
parentNode
:属性,表示当前节点的父节点previousSibling
:属性,表示当前节点的前一个兄弟节点nextSibling
:属性,表示当前节点的后一个兄弟节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
</style>
<script>
window.onload = function(){
function myClick(idName,fun){
var btn = document.getElementById(idName);
btn.onclick = fun;
};
myClick("but",function(){
var bj = document.getElementById("bj");
var pn = bj.parentNode;
// alert(pn.innerHTML);
alert(pn.innerText);
/*
innerText
-该属性可以获取到元素内部的文本内容
-它和innerHTML类似,不同的是它会自动将html去除*/
});
myClick("but2",function(){
var bj = document.getElementById("sh");
var pn = bj.previousSibling;
// alert(pn.innerHTML);
alert(pn.innerText);
});
myClick("but3",function(){
var bj = document.getElementById("sh");
var pn = bj.previousElementSibling;
// alert(pn.innerHTML);
alert(pn.innerText);
});
}
</script>
</head>
<body>
<div>
<ul id ="city">
<li id = "bj">北京</li>
<li id = "sh">上海</li>
<li id = "dj">东京</li>
<li id = "se">首尔</li>
</ul>
<button id="but">获取北京的父节点</button>
<br><br>
<button id="but2">获取上海的前一个兄弟节点</button>
<br><br>
<button id="but3">获取上海的前一个兄弟元素</button>
<br><br>
</div>
</body>
</html>
输出:
DOM查询——其他查询方法
- 获取body
<script type = "text/javascript">
windown.onload = function(){
// 法一
var body1 = document.getElementsByTagName("body")[0];
// 法二: 再doument中有一个body属性,保存额是body属性
var body2 = document.body;
}
</script>
- 获取html
var html = document.documentElement;
- 获取页面所有的元素
var all = document.all;
var all = document.getElementsByTagName("*");
eg:
var all = document.all;
console.log(all.length);
for(var i =0 ;i<all.length;i++){
console.log(all[i]);
}
输出:
- 通过class获取
var box1 = document.getElementsByClassName("box1");
getElementsByclassName()可以根据class属性值获取一组元素节点对象,但是该方法不支持IE8及以下的浏览器
document.querySelector()
:需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
<script type = "text/javascript">
window.onload = function(){
// 获取box1中所有的div
// 通过css选择器的方法获取div: .box1 div
// document.querySelector() :需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
var div = document.querySelector(".box1 div");
alert(div.innerHTML);
// 也可以直接查找class
var box1 = document.querySelector(".box1");
// 也可以直接查找id
var box1 = document.querySelector("#box1");
// 也可以直接查找标签
var box1 = document.querySelector("div");
}
</script>
但是:使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
querySelectorAll()
:该方法和querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回
即使符合条件的元素只有一个也会返回数组。
输入框值的获取和修改
对于属性:都是通过 对象.属性 获取,对象.属性 = 值 进行修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
</style>
<script>
window.onload = function(){
function myClick(idName,fun){
var btn = document.getElementById(idName);
btn.onclick = fun;
};
myClick("but",function(){
var inp = document.getElementsByTagName("input")[0];
alert(inp.value);});
myClick("but1",function(){
var inp = document.getElementsByTagName("input")[0];
inp.value="输入你在喜欢的城市";
});
}
</script>
</head>
<body>
<div>
<ul id ="city">
<li id = "bj">北京</li>
<li id = "sh">上海</li>
<li id = "dj">东京</li>
<li id = "se">首尔</li>
</ul>
<input type="text" value="输入你在喜欢的城市">
<br><br>
<button id="but">获取输入值</button>
<br><br>
<button id="but1">重置输入值</button>
</div>
</body>
</html>