DOM: document=网页
在JS中，浏览器已经为我们提供了document对象
document对象代表整个网页，该对象由浏览器提供，可以直接使用
<body>
<button id=&#;btn&#;>我是一个按钮</button>
<script>
// 在JS中，浏览器已经为我们提供了document对象
// document对象代表整个网页，该对象由浏览器提供，可以直接使用
// getElementById()是document的方法，通过方法可以根据元素的id属性获取一个元素
var btn = document.getElementById(&#;btn&#;);
// 修改btn的innerHTML属性
btn.innerHTML = &#;I&#;m Button&#;;
// alert(btn.innerHTML);
// alert(btn);
// 通过JS来修改button中的文字
</script>
</body>对象的分类:
JS中，可以将对象分为“内部对象”、“宿主对象”和“自定义对象”三种。
1，内部对象
js中的内部对象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。
2.宿主对象
宿主对象就是执行JS脚本的环境提供的对象。对于嵌入到网页中的JS来说，其宿主对象就是浏览器提供的对象，所以又称为浏览器对象，如IE、Firefox等浏览器提供的对象。不同的浏览器提供的宿主对象可能不同，即使提供的对象相同，其实现方式也大相径庭！这会带来浏览器兼容问题，增加开发难度。
浏览器对象有很多，如Window和Document，Element，form，image，等等。
3.自定义对象
顾名思义，就是开发人员自己定义的对象。JS允许使用自定义对象，使JS应用及功能得到扩充
事件（event）
事件（event）
- 事件指用户和浏览器的交互瞬间
- 在网页中，像点击鼠标、缩放窗口、点击键盘、移动鼠标...
- 可以在事件时来对事件做一些处理，对其进行响应
<body>
<!-- 设置事件响应的方式一:
- 可以通过在元素的事件属性中设置js代码的形式来响应事件
https://developer.mozilla.org/zh-CN/docs/Web/Events -->
<!--<button id=&#;btn&#; onmouseenter=&#;alert(&#;你点我干嘛！&#;);&#;>点我一下</button>-->
<button id=&#;btn&#;>点我一下</button>
<script>
/*设置事件响应的方式二:
- 可以在script标签来设置事件的响应*/
// 获取要设置事件的对象
var btn = document.getElementById(&#;btn&#;);
// 可以为元素对应的事件属性设置响应函数形式来处理事件
btn.onclick = function () {
alert(&#;哈哈哈&#;);
};
</script>
</body>网页加载window.onload:
网页的加载是按照自上向下的顺序一行一行加载的
Window.onload 函数只能绑定一个!
如果将script标签写在网页的上方，它会优先于body加载
编写DOM相关的代码时，有两个编写位置：
1.编写在body标签的最后
2.编写在window.onload = function(){}的响应函数中
// 希望还是将代码写在网页上边
// 希望这些代码，可以在网页加载完毕之后在执行
// load事件表示资源加载，当资源加载完毕后事件会触发
window.onload = function () {
// window的load事件，会在网页加载完毕后触发
// 可以将希望在网页加载完才执行的代码，统一设置在load事件的响应函数中
// 这样即可确保代码在网页加载完成后才执行
//获取id为btn的元素
var btn = document.getElementById(&#;btn&#;);
//为btn绑定单击响应函数
btn.onclick = function () {
alert(&#;哈哈哈哈&#;);
};
};DOM 查询:
<script>
//定义一个函数，用来解决绑定代码重复的问题
/*
参数：
id 要绑定单击事件的按钮的id
callback 事件的响应函数
*/
function myClick(id, callback){
var btn = document.getElementById(id);
btn.onclick = callback;
}
window.onload = function () {
//为id为btn01的按钮绑定一个单击响应函数
//获取按钮对象
var btn01 = document.getElementById(&#;btn01&#;);
// 为其绑定单击响应函数
btn01.onclick = function () {
// getElementById()用来根据id属性来获取一个元素
// 查找#bj节点
var bj = document.getElementById(&#;bj&#;);
// innerHTML 可以用来查看和设置元素内部的html代码
alert(bj.innerHTML);
};
// 为btn02绑定一个单击响应函数
var btn02 = document.getElementById(&#;btn02&#;);
btn02.onclick = function () {
// 查找所有li节点
// getElementsByTagName() 用于根据标签名来获取一组元素节点对象
// 返回是一个类数组对象，所有符合条件的元素都会一起返回
var lis = document.getElementsByTagName(&#;li&#;);
// 遍历数组
for(var i=0; i<lis.length; i++){
alert(lis[i].innerHTML);
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById(&#;btn03&#;);
btn03.onclick = function () {
// 查找name=gender的所有节点
// getElementsByName() 根据元素的name属性来获取一组元素节点对象
var inps = document.getElementsByName(&#;gender&#;);
// 遍历inps
for(var i=0; i<inps.length; i++){
// 获取自结束标签的innerHTML，会返回空串
// alert(inps[i].innerHTML);
/*
读取一个元素的属性：
元素.属性名
例子：
name属性 元素.name
value属性 元素.value
id属性 元素.id
特殊：
class属性 元素.className
修改属性：
元素.属性名 = 属性值
*/
// alert(inps[i].className);
alert(inps[i].value);
}
};
//为btn04绑定一个单级响应函数
var btn04 = document.getElementById(&#;btn04&#;);
btn04.onclick = function () {
// 获取id为city的节点
var city = document.getElementById(&#;city&#;);
// 查找#city下所有li节点
var li = city.getElementsByTagName(&#;li&#;);
// li = document.querySelectorAll(&#;#city li&#;);
alert(li.length);
};
// 为btn05绑定一个单击响应函数
var btn05 = document.getElementById(&#;btn05&#;);
btn05.onclick = function () {
// 获取id为city的元素
var city = document.getElementById(&#;city&#;);
// 返回#city的所有子节点
// childNodes 是元素的属性，可以用来获取当前元素的所有子节点
// childNodes会返回当前元素的所有子节点（包括元素和文本）
// IE8以下的浏览器不会将空白的文本节点当成子节点
var cns = city.childNodes;
//遍历cns
// for(var i=0; i<cns.length; i++){
// alert(cns[i]);
// }
// alert(cns.length);
/*
children 是元素的属性，用来获取当前元素的子元素
*/
var cr = city.children;
alert(cr.length);
};
// 为id为btn06的按钮绑定一个单击响应函数
myClick(&#;btn06&#;, function () {
// 获取id为phone的元素
var phone = document.getElementById(&#;phone&#;);
// 返回#phone的第一个子节点
// firstChild用于获取元素的第一个子节点（包括空白的文本节点）
// lastChild 用于获取当前元素的最后一个子节点
// firstElementChild 用来获取当前元素的第一个子元素
// lastElementChild 用来获取当前元素的最后一个子元素
var fc = phone.firstChild;
var fec = phone.firstElementChild;
alert(fec);
});
myClick(&#;btn07&#;,function () {
//获取id为北京元素
var bj = document.getElementById(&#;bj&#;);
// 返回#bj的父节点
// parentNode 用来获取一个元素的父节点
var pn = bj.parentNode;
// innerText用来获取标签内部的文本内容，会自动去除html标签
alert(pn.innerText);
});
myClick(&#;btn08&#;,function () {
// 获取id为android的元素
var and = document.getElementById(&#;android&#;);
// 返回#android的前一个兄弟节点
// previousSibling 用来获取当前元素的前一个兄弟节点
// previousElementSibling 用来获取当前元素的前一个兄弟元素
// nextSibling 获取当前元素的下一个兄弟节点
// nextElementSibling 获取当前元素的下一个兄弟元素
var prev = and.previousSibling;
prev = and.previousElementSibling;
// and.nextElementSibling
alert(prev);
});
// 返回#username的value属性值
myClick(&#;btn09&#;,function () {
// 获取id为username的元素
var um = document.getElementById(&#;username&#;);
alert(um.value);
});
// 设置#username的value属性值
myClick(&#;btn10&#;,function () {
var um = document.getElementById(&#;username&#;);
um.value = &#;老弟可真帅啊！&#;;
});
// 返回#bj的文本值
myClick(&#;btn11&#;,function () {
// 获取id为bj的元素
var bj = document.getElementById(&#;bj&#;);
// alert(bj.innerHTML);
// alert(bj.innerText);
// bj.innerHTML = &#;深圳&#;;
// 获取bj的第一个子节点
// var fc = bj.firstChild;
// 文本节点的nodeValue，表示的是文本节点中的文字
// alert(fc.nodeValue);
alert(bj.firstChild.nodeValue);
});
};
</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=&#;haha&#; type=&#;radio&#; name=&#;gender&#; value=&#;male&#; >
Male
<input class=&#;haha&#; 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>1.5Dom练习切换图片:
<style>
#outer{
width: 520px;
background-color: #bfa;
margin: 50px auto;
text-align: center;
}
img{
vertical-align: bottom;
margin: 10px;
}
</style>
<script>
window.onload = function () {
// 点击按钮切换图片，点击上一张切换到上一张，点击下一张切换到下一张
// 获取图片标签
var img = document.getElementsByTagName(&#;img&#;)[0];
// 切换图片实际上就是修改img的src属性
// img.src = &#;img/3.jpg&#;;
// 创建一个数组，用来存储图片的路径
var imgPath = [&#;img/1.jpg&#;,&#;img/2.jpg&#;,&#;img/3.jpg&#;,&#;img/4.jpg&#;,&#;img/5.jpg&#;];
//创建一个变量用来存储当前显示的图片的索引
var current = 0;
// 设置图片的信息
var info = document.getElementById(&#;info&#;);
info.innerHTML = &#;一共 &#;+imgPath.length+&#; 张图片，当前第 &#;+(current+1)+&#; 张&#;;
//为两个按钮绑定单击响应函数
var prev = document.getElementById(&#;prev&#;);
var next = document.getElementById(&#;next&#;);
// 如何做到在五张图片之间切换？
prev.onclick = function () {
// 上一张
// 索引自减
current--;
//判断current是否小于0
if(current < 0){
current = imgPath.length - 1;
}
// 修改img的src来切换图片
img.src = imgPath[current];
// 图片切换完毕，修改信息
info.innerHTML = &#;一共 &#;+imgPath.length+&#; 张图片，当前第 &#;+(current+1)+&#; 张&#;;
};
next.onclick = function () {
// 下一张
// 索引自增
current++;
//判断current是否大于4
if(current > imgPath.length - 1){
current = 0;
}
img.src = imgPath[current];
info.innerHTML = &#;一共 &#;+imgPath.length+&#; 张图片，当前第 &#;+(current+1)+&#; 张&#;;
};
};
</script>
</head>
<body>
<div id=&#;outer&#;>
<p id=&#;info&#;>一共 5 张图片，当前第 1 张</p>
<img src=&#;img/1.jpg&#; alt=&#;冰棍&#;>
<button id=&#;prev&#;>上一张</button>
<button id=&#;next&#;>下一张</button>
</div>
</body>1.6DOM 其它查询方法:
getElementsByName()它返回的是一个实时更新的数组 所有的getElementsXxx的方法都是这个特点==页面代码加载完成后才更新添加
querySelector()- 可以根据选择器的字符串去页面中查询元素
- 会返回满足选择器的第一个元素
querySelectorAll() //两种都是静态获取
- 根据选择器获取一组元素节点对象
<script>
//getElementsByName()它返回的是一个实时更新的数组 所有的getElementsXxx的方法都是这个特点==页面代码加载完成后才更新添加
// 如果在网页中添加新的符合条件的元素，它会自动被添加到数组中
window.onload = function () {
// getElementsByClassName() 用于根据元素的class属性值来获取一组元素节点对象
var box1 = document.getElementsByClassName(&#;box1&#;);
// alert(box1.length);
// for(var i=0; i<box1.length; i++){
// box1[i].innerHTML = &#;哈哈哈哈哈哈&#;;
// }
/*
querySelector()- 可以根据选择器的字符串去页面中查询元素
- 会返回满足选择器的第一个元素
querySelectorAll() //两种都是静态获取
- 根据选择器获取一组元素节点对象
*/
var result = document.querySelector(&#;.box1&#;);
result = document.querySelectorAll(&#;.box1&#;);
result = document.querySelector(&#;[class=box1]&#;);
result = document.querySelector(&#;div&#;);
result = document.querySelector(&#;div:nth-child(2)&#;);
// alert(result.innerHTML);
/*
document.all 是一个过时的属性
它表示页面中的所有元素
可以使用 document.getElementsByTagName(&#;*&#;) 来代替
document.body 获取页面中的body元素
document.documentElement 获取页面的根元素html
*/
// alert(document.all.length);
// var all = document.getElementsByTagName(&#;*&#;);
// alert(all.length);
// alert(document.body);
// alert(document.getElementsByTagName(&#;body&#;)[0]);
alert(document.documentElement);
};
</script>
</head>
<body>
<div class=&#;box1&#;>1</div>
<div class=&#;box1&#;>2</div>
<div class=&#;box1&#;>3</div>
<div class=&#;box1&#;>4</div>
</body>欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。
学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。
在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。
此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。
我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。
如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！
#年度创作挑战##文章首发挑战赛##跨年幸运签##微头条激励计划##我的年度运势##大湾区寻宝##冬季生活打卡季##程序员##web网站##react##vue#