3.1、DOM初相识
3.1.1、DOM简介
文档对象模型(Document Object Model ,简称DOM),它就是一些系列编程接口,有了这些接口,就可以改变页面内容,结构和样式
DOM树:
文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中所有的标签都是元素,DOM中使用element表示
节点:网页中所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
DOM把以上内容都看作是对象
3.1.2、事件前言
事件:就是用户和浏览器之间的交互行为,比如:点击按钮,鼠标移动,关闭窗口.....
事件非常多,为了方便演示,先学简单的事件,后面再详细学习
方式一、
标签中对应的属性(事件属性)中设置一些js代码,这样当事件被触发时,这些代码将会被执行
这种方式:结构与行为耦合,不方便维护,不推荐使用
<button id="btn" onclick="alert('哈喽');">我是一个按钮</button> //onclick点击事件,点击的时候触发
方式二、
可以为按钮的对应事件绑定处理函数的形式来响应事件,这样当事件被触发时,其对应的函数将会被调用
<body><button id="btn">我是一个按钮</button><script>//第一步:获取按钮对象var btn=document.getElementById("btn");//第二步:绑定一个单击事件//像这种为单击事件绑定的函数,我们称为单击响应函数btn.onclick=function(){alert("你好")}</script>
</body>
3.1.3、文档的加载
浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上边, 在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载 ,会导致无法获取到DOM对象。
第一种加载情况:
将js代码编写到页面的下部就是为了,可以在页面加载完毕以后再执行js代码
<button id="btn">点我一下</button><script type="text/javascript">//获取id为btn的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function () {alert("hello");};</script>
第二种加载写法:
onload事件会在整个页面加载完成之后才触发, 为window绑定一个onload事件 ,该事件对应的响应函数将会在页面加载完成之后执行, 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
window.onload = function () {//获取id为btn的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function () {alert("hello");};};
3.2、DOM获取
DOM在我们实际开发中主要用来操作元素。一般有以下方法获取DOM
3.2.1、getElementById()
通过id属性获取一个元素节点对象,参数:id是大小写敏感的字符串,返回的是一个元素对象
补充1:innerHTML 可读写,一方面可获取到元素内部的html代码,另一方面可以操作更改元素内容,包括标签,保留空格和换行,比较常用
补充2:innerText 可读写,它和innerHTMl类似,不同的是更改元素内容的时候,它会自动将html标签,空格和换行去除
补充3:console.dir 打印我们返回的元素对象,更好的查看里面的属性和方法
var btn01 = document.getElementById("btn01"); //查找#btn01节点btn01.onclick = function () {var bj = document.getElementById("bj") //查找#bj节点alert(bj.innerHTML);//console.dir(bj, "bj");};
3.2.2、getElementsByTagName()
3.2.2.1、根据标签名来获取一组元素节点对象
返回一个类数组(伪数组)对象,所有查询到的元素都会封装到对象中,即使查询到的元素只有一个,也会封装到伪数组中返回;如果页面中没有这个元素,则会返回一个空的伪数组;
var btn02 = document.getElementById("btn02");btn02.onclick = function () {var lis = document.getElementsByTagName("li");//打印lis//alert(lis.length);//遍历lisfor (var i = 0; i < lis.length; i++) {console.log(lis[i].innerHTML);}};
3.2.2.2、获取某个元素(父元素)内部所有指定标签名的元素
1 element.getElementsByTagName('标签名')
注意:父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己
//获取id为city的元素
var city = document.getElementById("city");
/* 1:city.getElementsByTagName(); 获取元素下的一组节点 */
var lis = city.getElementsByTagName("li");
3.2.3、getElementsByName()
通过name属性获取一组元素节点对象
补充2: innerHTML用于获取元素内部的HTML内容的,对于自结束标签,这个属性没有意义
补充3:如果需要读取元素节点属性,语法: 元素.属性名,
例如:元素.id ;元素.name ;元素.src ;元素.href等
表单属性:type、value、checked、selected、disabled等
注意:class属性不能采用这种方式,读取class属性时需要使用 元素.className
value值:就是输入文本框中的内容,要修改value值 element.value = "~~";
var btn03 = document.getElementById("btn03");btn03.onclick = function () {var inputs = document.getElementsByName("gender");//alert(inputs.length);for (var i = 0; i < inputs.length; i++) {//alert(inputs[i].innerHTML);// alert(inputs[i].value);alert(inputs[i].className);}};
3.2.4、getElementsByClassName()
通过class属性获取一组元素节点对象 (不支持IE8及以下浏览器)
var btn04 = document.getElementById("btn04");btn04.onclick = function () {var classs = document.getElementsByClassName("inner");for (var i = 0; i < classs.length; i++) {alert(classs[i].className);}};
3.2.5、childNodes、children
返回父元素下的所有子节点
(1)、childNodes属性会获取包括文本节点在内的所有节点,DOM标准,标签间的空白也会被当成文本节点
(2)、children属性可以获取当前元素的所有子元素,不包括空白文档了
3.2.6、firstChild、firstElementChild
返回父元素下的第一个子节点
(1)、firstChild 第一个子节点(包括空白的文本节点)
(2)、firstElementChild 获取当前元素的第一个子元素
3.2.7、返回某元素的父节点
语法:某元素.parentNode
3.2.8、返回某元素的前/后一个兄弟节点
(1)、 previousSibling [ˈpriːviəs] ['sibliŋ] 返回前一个兄弟节点 也有可能获取到空白的文本
(2)、 previousElementSibling 返回前一个兄弟元素,不包括空白文本,注意:不支持ie8及以下的浏览器
(3)、 nextSibling返回下一个兄弟节点 也有可能获取到空白的文本
(4)、 nextElementSibling 返回下一个兄弟元素,不包括空白文本,注意:不支持ie8及以下的浏览器
var div = document.querySelector(".box1 div")
var div = document.querySelector(".box1")
var div=document.querySelectorAll(".box1")
3.2.9、获取body标签
//方法一
var body=document.getElementsByTagName("body")[0];
//方法二
var body = document.body
3.2.10、获取html根标签
var html = document.documentElement;
3.2.11、获取页面中所有的元素
//第一种方式
var all=document.all;
//第二种方式
var all = document.getElementsByTagName("*")
3.2.12、document.querySelector()
-需要一个选择器的字符串作为参数,可以根据一个css选择器来查询一个元素节点对象
-该方法总会返回唯一的元素,如果满足条件的元素是多个,那么它只会返回第一个
-IE8以上的都适用
3.2.13、document.querySelectorAll()
-该方法和qureySelector()用法类似,不同的是它将会将符合条件的所有元素封装到一个伪数组中返回
-即使符合条件的元素只有一个,它也会返回数组
123var div = document.querySelector(".box1 div")var div = document.querySelector(".box1")var div=document.querySelectorAll(".box1")
课堂小练习:
1、分时显示不同图片,显示不同问候语
根据不同时间、页面显示不同的图片、同时显示不同的问候语。上午时间打开页面,显示上午好,显示上午的图片;下午显示下午的,晚上显示晚上的
2、防小米显示密码:点击按钮将密码框切换为文本框,并可以查看密码明文