当前位置：首页 > news >正文

javaScriptDOM获取

news 2024/12/14 0:56:29

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、防小米显示密码：点击按钮将密码框切换为文本框，并可以查看密码明文