『Javascript基础重点』13.dom的应用
目录
- 什么是dom?为什么要用dom
- 常用的dom方法
- 2. dom必要性之一降低耦合的需要
- 3. 文档的加载影响书写dom的位置
- 4. dom查询例程
- n. 未完待续
- 总结
欢迎关注 『Javascript基础重点』 专栏,持续更新中
欢迎关注 『Javascript基础重点』 专栏,持续更新中
介绍一些Javascript的基础重点知识,包括并不限于函数作用域与提前声明和对象的构造函数等问题。
什么是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 ...
最新文章
- AI应用落地哪家强?CSDN AI Top 30+案例评选等你来秀!
- Linux C : 进程管理实验:创建进程、上下文切换
- 人人都会设计模式:03-策略模式--Strategy
- easyui datagrid 列中的checkbox 动态绑定
- Atitit. Dwr 抛出异常error解决方案
- Java8 中的真的 Optional 很强大,你用对了吗?
- linuxshell编程_使shell命令发包软件-当你在Linux shell调用外部程序,如
- Kubernetes CKS【21】---Runtime Security -主机与容器行为安全分析(strace、/proc、env、falco)
- 微博视频号搬砖项目,单号月入1000+!
- 2020-2021年度第二届全国大学生算法设计与编程挑战赛(冬季赛)题解
- 关闭腾讯网迷你版(登录qq后的广告弹窗)
- 最优策略(Optimal Policy)及贝尔曼最优方程(Bellman Optimally Equation)
- CSS文字的居中 盒子模型
- 北师大 马原 自测题复习
- 【Beta阶段】第八次Scrum Meeting
- Unreal Windows平台打包iOS
- 机载雷达导论(附录)
- Linux内核死锁检测工具——Lockdep
- Endnote使用经验分享
- 【转】解析IAR的ILINK链接器icf配置文件