欢迎关注 『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.onload
window.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);
//变量lis
for (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. 未完待续
总结
大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！
版权声明：
发现你走远了@mzh原创作品，转载必须标注原文链接
Copyright 2023 mzh
Crated：2023-3-1
欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
『1.提前声明问题，你苦恼写了js函数代码但是不会生效的问题吗？』
『2.易错点之函数形参与函数作用域的坑』
『3.了解原型对象优雅地构造函数の“JS中的Java继承” 提高运行效率，优雅地使用对象』
『4.JS垃圾回收机制简析』
『5.以toString()为例学习JS中的java方法重写』
『6.数组的常用方法与数组遍历』
『7.函数进阶之call()和apply()与arguments』
『8.Date类与利用时间戳来测试代码的执行的性能』
『9.Math类方法』
『10.包装类』
『11.字符串的方法』
『12.正则表达式介绍 邮件正则表达式写法』
『13.dom的应用』
『未完待续』
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
