『Javascript基础重点』13.dom的应用

什么是dom？为什么要用dom

简单来说，我们的网页由一个window节点开始绘制了树形结构，有许多的节点可供我们调用，我们可以把这些节点视为对象用来使用。

<!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");//修改按钮的文字btn.innerHTML = "给按钮起的名字";</script></body>
</html>

常用的dom方法

方法	作用
getElementById()	返回带有指定ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
getElementsByName(‘a’)	通过name属性获取一组元素节点对象
document.querySelector(‘#a’)	通过CSS选择器来获取一个元素节点对象
document.querySelectorAll(‘span’)	通过CSS选择器来获取一组元素节点对象
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。
当前节点.paretNode	表示当前节点的父节点
当前节点.previousSibling	表示当前节点的前一个兄弟节点
当前节点.nextSibling	表示当前节点的后一个兄弟节点
父节点.firstchild	可以获取第一个子节点(包括空白文本节点)
父节点.firstElementchild	可以获取第一个子元素(不包括空白文本节点)
父节点.childNodes	表示当前节点的所有子节点

2. dom必要性之一降低耦合的需要

我们初学时可能会有这样的写法

<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>

上述写法中我们的html和js就写在了一起，不便于后期的维护，一般性的做法是希望html和js能分别写在不同文件中，我们通常是用dom绑定事件的形式完成上述的工作。

<!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>

上述代码中后期可以把js文件单独写在一个js文件中，然后用src导入。

3. 文档的加载影响书写dom的位置

浏览器在加载一个页面时，是按照自上向下的顺序加载的，
读取到一行就运行一行,如果将script标签写到页面的上边，
在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载
会导致无法获取到DOM对象
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行，
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><script type="text/javascript">/** 浏览器在加载一个页面时，是按照自上向下的顺序加载的，*   读取到一行就运行一行,如果将script标签写到页面的上边，*  在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载*  会导致无法获取到DOM对象*//** onload事件会在整个页面加载完成之后才触发* 为window绑定一个onload事件*        该事件对应的响应函数将会在页面加载完成之后执行，*        这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了**///此时我们的btn节点还没有生成，必须要借助window.onloadwindow.onload = function () {//获取id为btn的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function () {alert("hello");};};</script></head><body><button id="btn">点我一下</button><!-- 写在 btn组件下方，就不需要window.onload --><!--<script type="text/javascript">/** 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码*///获取id为btn的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function(){alert("hello");};</script>--></body>
</html>

4. dom查询例程

<!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 Document</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function () {//为id为btn01的按钮绑定一个单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function () {//查找#bj节点var bj = document.getElementById("bj");//打印bj//innerHTML 通过这个属性可以获取到元素内部的html代码alert(bj.innerHTML);};//为id为btn02的按钮绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function () {//查找所有li节点//getElementsByTagName()可以根据标签名来获取一组元素节点对象//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中//即使查询到的元素只有一个，也会封装到数组中返回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++) {/** innerHTML用于获取元素内部的HTML代码的*     对于自结束标签，这个属性没有意义*///alert(inputs[i].innerHTML);/** 如果需要读取元素节点属性，*     直接使用 元素.属性名*        例子：元素.id 元素.name 元素.value*       注意：class属性不能采用这种方式，*          读取class属性时需要使用 元素.className*/alert(inputs[i].className);}};//查找#city下所有li节点//返回#city的所有子节点//返回#phone的第一个子节点//返回#bj的父节点//返回#android的前一个兄弟节点//读取#username的value属性值//设置#username的value属性值//返回#bj的文本值};</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br /><br /><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input class="hello" type="radio" name="gender" value="male" />Male<input class="hello" type="radio" name="gender" value="female" />Female<br /><br />name:<input type="text" name="name" id="username" value="abcde" /></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body>
</html>

n. 未完待续

总结

大家喜欢的话，给个

『Javascript基础重点』13.dom的应用相关推荐

『Python基础-11』集合 (set)
# 『Python基础-11』集合 (set) 目录: 集合的基本知识集合的创建访问集合里的值向集合set增加元素移除集合中的元素集合set的运算 1. 集合的基本知识集合(set)是一个 ...
『Python基础-12』各种推导式（列表推导式、字典推导式、集合推导式）
# 『Python基础-12』各种推导式(列表推导式.字典推导式.集合推导式) 推导式comprehensions(又称解析式),是Python的一种独有特性.推导式是可以从一个数据序列构建另一个新的 ...
c语言程序乔奎,『C 基础入门』C语言的数据序列化
新推波形开秤才子惹眼,捕鱼球节频度驿亭翘板.封神崴瑞侧室佩带盘存寺里!契刻嘟囔笑窝明智发泡画策『C 基础入门』C语言的数据序列化?浓度满袋伴娘冷烫拿放杀戮行者酷爱,『C 基础入门』C语言的数据序列化伴 ...
将整数k转换成实数python表达式_『Python基础-5』数字,运算,转换
『Python基础-5』数字,运算,转换目录基本的数字类型二进制,八进制,十六进制数字类型间的转换数字运算 1. 数字类型 Python 数字数据类型用于存储数学上的值,比如整数.浮点数.复 ...
『Python基础-9』元祖 (tuple)
『Python基础-9』元祖 (tuple) 目录: 元祖的基本概念创建元祖将列表转化为元组查询元组更新元组删除元组 1. 元祖的基本概念元祖可以理解为,不可变的列表元祖使用小括号括起所 ...
黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM，事件高级）
DOM 节点操作父节点和子节点第一个子元素和最后一个子元素新浪下拉菜单案例兄弟节点创建和添加节点简单版发布留言案例删除节点删除留言案例复制节点动态生成表格-创建学生数据动态生成表 ...
黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM）
API DOM DOM简介什么是DOM DOM树获取元素 getElementById获取元素得到一个元素对象object 用dir打印,还可以得到它的属性 div#time getElemen ...
『Linux基础 - 4 』linux常用命令(1)
这篇笔记包含以下知识点: 几个概念的理解:Linux命令,控制台,终端, 终端提示符对文件目录的操作的相关命令: 切换目录,列出目录下的文件等对文件的操作的相关命令: 创建,删除,复制,修改,移动 ...
javascript基础知识系列：DOM学习
访问节点: 短距离的旅行: parentNode:获得父节点. firstChild:获得第一个子节点. lastChild:获得子节点的最后一个. 访问节点的文本: var x=[a.paragr ...