JavaScript基础学习（四）
文章目录
- DOM
- 节点
- 节点的属性
- 获取元素节点
- 获取元素节点的子节点
- 获取父节点和兄弟节点
- 事件
- 文档加载
- DOM查询
- 图片切换练习
- 全选练习
- DOM查询的其他方法
- DOM的增删改
- 添加删除记录练习
DOM
DOM，全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。
- 文档：文档表示的就是整个HTML网页文档。
- 对象：对象表示将网页中的每一个部分都转换为一个对象。
- 模型：使用模型来表示对象之间的关系，这样方便那我们获取对象。
节点
- 节点Node，是构成我们网页的最基本的组成部分，网页中的每个部分都可以称为是一个节点。比如：html标签、属性、文本、注释、整个文档等都是一个节点。
- 虽然都是节点，但是实际上他们的具体类型是不同的。如：标签称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
- 节点的类型不同，属性和方法也不尽相同。
节点的属性
| nodeName | nodeType | nodeValue | |
|---|---|---|---|
| 文档节点 | #document | 9 | null |
| 元素节点 | 标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
获取元素节点
通过document对象调用
getElementById()通过id属性获取一个元素节点对象getElementsByTagName()通过标签名获取一组元素节点对象。这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中；即使查询到的元素只有一个，也会封装到数组中返回。getElementsByName()通过name属性获取一组元素节点对象
获取元素节点的子节点
通过具体的元素节点调用
getElementsByTagName()方法，返回当前节点的指定标签名后代节点childNodes属性，表示当前节点的子节点firstChild属性，表示当前节点的第一个子节点。（包括空白文本节点）lastChild属性，表示当前节点的最后一个子节点
获取父节点和兄弟节点
通过具体的节点调用
parentNode属性，表示当前节点的父节点previousSibling属性，表示当前节点的前一个兄弟节点nextSibling属性，表示当前节点的后一个兄弟节点
示例：
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>title>head><body><button id="btn">我是一个按钮button><script type="text/javascript">/** 浏览器已经为我们提供了文档节点对象，这个对象是window对象的属性，* 可以在页面中直接使用，文档节点代表的是整个网页*/console.log(document);//获取button对象var btn = document.getElementById("btn");console.log(btn);//修改按钮的文字//innerHTML通过这个属性可以获取到元素内部的html代码btn.innerHTML = "I am a Button";script>body>
html>事件
事件，就是用户和浏览器之间的交互行为。比如：点击按钮、鼠标移动、关闭窗口……
- 我们可以在事件对应的属性中设置一些JS代码，这样当事件被触发时，这些代码将会执行，这种写法我们成为结构和行为的耦合，不方便维护，不推荐使用。
示例：
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>title>head><body><button id="btn" onclick="alert('讨厌，点我干嘛~')">我是一个按钮button>body>
html>修改后：
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>title>head><body><button id="btn">我是一个按钮button><script type="text/javascript">//获取按钮对象var btn = document.getElementById("btn");/** 可以为按钮的对应事件绑定处理函数的形式来响应事件* 这样当事件被触发时，其对应的函数将会被调用*///绑定一个单击事件//像这种为单击事件绑定的函数，我们称为单击响应函数btn.onclick = function(){alert("你还点~");};script>body>
html>像这种为单击事件绑定的函数，我们称为单击响应函数
如：
<script type="text/javascript">var btn = document.getElementById("btn"); //单击响应函数btn.onclick = function(){alert("你还点~");};script>
文档加载
- 浏览器在加载页面时，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将
标签写到页面上面，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。
示例：正常写法
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>title>head><body><button id="btn">我是一个按钮button><script type="text/javascript">//获取id为btn的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function(){alert("hello");};script>body>
html>示例：错误写法
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>title><script type="text/javascript">//获取id为btn的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function(){alert("hello");};script>head><body><button id="btn">我是一个按钮button>body>
html>- 解决方法：onload事件会在整个页面加载完成后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
示例：
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>title><script type="text/javascript"> window.onload = function(){//获取id为btn的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function(){alert("hello");};};script>head><body><button id="btn">我是一个按钮button>body>
html>DOM查询
innerHTML通过这个属性可以获取到元素内部的html代码。 对于自结束标签，这个属性没有意义。innerText该属性可以获取到元素内部的文本内容。它和innerHTML类似，不同的是它会自动将html去除。- 如果需要读取元素节点属性， 直接使用
元素.属性名
例子：元素.id、元素.name、元素.value
注意：class属性不能采用这种方式，读取class属性时需要使用元素.className childNodes属性会获取包括文本节点在内的所有节点。根据DOM标准，标签间空白也会当成文本节点。
注意：在IE8及以下的浏览器中，不会将空白文本当成子节点。children属性可以获取当前元素的所有子元素firstElementChild获取当前元素的第一个子元素，但firstElementChild不支持IE8及以下的浏览器， 如果需要兼容他们尽量不要使用。
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Documenttitle><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">/** 定义一个函数，专门用来为指定元素绑定单击响应函数* 参数：* idStr 要绑定单击响应函数的对象的id属性值* fun 事件的回调函数，当单击元素时，该函数将会被触发*/function myClick(idStr , fun){var btn = document.getElementById(idStr);btn.onclick = fun;}印bj//innerHTML 通过这个属性可以获取到元素内部的html代码alert(bj.innerHTML);};//为id为btn02的按钮绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function(){//查找所有li节点var lis = document.getElementsByTagName("li");//打印lis//alert(lis.length);//变量lisfor(var i=0 ; i<lis.length ; i++){alert(lis[i].innerHTML);}};//为id为btn03的按钮绑定一个单击响应函数var btn03 = document.getElementById("btn03");btn03.onclick = function(){//查找name=gender的所有节点var inputs = document.getElementsByName("gender");//alert(inputs.length);for(var i=0 ; i<inputs.length ; i++){//alert(inputs[i].innerHTML);alert(inputs[i].className);}};//为id为btn04的按钮绑定一个单击响应函数var btn04 = document.getElementById("btn04");btn04.onclick = function(){//获取id为city的元素var city = document.getElementById("city");//查找#city下所有li节点var lis = city.getElementsByTagName("li");for(var i=0 ; i<lis.length ; i++){alert(lis[i].innerHTML);}};//为id为btn05的按钮绑定一个单击响应函数var btn05 = document.getElementById("btn05");btn05.onclick = function(){//获取id为city的节点var city = document.getElementById("city");//返回#city的所有子节点var cns = city.childNodes;//alert(cns.length);/*for(var i=0 ; ivar cns2 = city.children;alert(cns2.length);};//为id为btn06的按钮绑定一个单击响应函数var btn06 = document.getElementById("btn06");btn06.onclick = function(){//获取id为phone的元素var phone = document.getElementById("phone");//返回#phone的第一个子节点//phone.childNodes[0];var fir = phone.firstChild;alert(fir);};//为id为btn07的按钮绑定一个单击响应函数myClick("btn07",function(){//获取id为bj的节点var bj = document.getElementById("bj");//返回#bj的父节点var pn = bj.parentNode;alert(pn.innerHTML);});//为id为btn08的按钮绑定一个单击响应函数myClick("btn08",function(){//获取id为android的元素var and = document.getElementById("android");//返回#android的前一个兄弟节点（也可能获取到空白的文本）var ps = and.previousSibling;//previousElementSibling获取前一个兄弟元素，IE8及以下不支持//var pe = and.previousElementSibling;alert(ps);});//读取#username的value属性值myClick("btn09",function(){//获取id为username的元素var um = document.getElementById("username");//读取um的value属性值//文本框的value属性值，就是文本框中填写的内容alert(um.value);});//设置#username的value属性值myClick("btn10",function(){//获取id为username的元素var um = document.getElementById("username");um.value = "今天天气真不错~~~";});//返回#bj的文本值myClick("btn11",function( 本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！