这篇博客详细介绍了DOM（文档对象模型）的概念及其在网页中的应用。内容包括通过ID、标签、类名和name获取元素对象，修改元素内容，绑定事件处理函数，以及处理文档加载和事件触发的时机。此外，还涵盖了全选、全不选和反选功能的实现，以及DOM元素的增删查改、CSS操作和样式读取。最后讨论了元素的尺寸、位置以及滚动区域的相关属性。
dom
- DOM Document Object Model 文档对象模型
<script type="text/javascript">
alert(123)
//
</script>
<a href="http://www.baidu.com">百度</a>
02dom
html标签 == 元素 == 节点 Element
1- 获取button按钮的元素对象 并将内容修改为 i love button
2- 通过循环修改多个a链接的内容
<a id="a" href="">baidu</a>
<button>我是一个按钮</button>
<script type="text/javascript">
console.log(document.getElementById("a"))
// 根据id获取指定元素（标签）对象，将数据存储到本地变量a中
var a = document.getElementById("a")
// 修改标签之间的内尔用
a.innerHTML = "百度"
03复习
<script type="text/javascript">
document.write("张三说:\"小明睡着了\"")
</script>
04事件
在事件对应的属性中设置一些js代码
当事件触发时，执行此代码
此种方式我们成为结构与行为的耦合
不方便维护 ，不推荐使用
<!-- 对button标签绑定了一个单击事件 -->
<button onclick="alert('hello world')">按钮</button>
<!-- 对div标签绑定了鼠标移入的事件 -->
<div onmouseover="alert('hello javascript')"></div>
<div style="width:100px;height:200px;background:pink"></div>
<button id="btn">你敢点我下试试</button>
<script type="text/javascript">
/*
事件：浏览器与用户之间交互的行为
鼠标移动 、 鼠标点击 ，。。。。。。。。
*/
// 根据指定id获取元素对象
var btn = document.getElementById("btn")
// 对btn元素对象注册单击事件， 当事件触发时 执行回调处理函数
btn.onclick = function(){
alert("试试就试试")
}
05文档加载
<script type="text/javascript">
window.onload = function(){
var id = document.getElementById("btn")
console.log(id)
}
</script>
<button id="btn">按钮</button>
<script type="text/javascript">
/*
1- 浏览器加载页面时，自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的顶部
在执行代码时，页面没有加载，页面也没有加载dom对象
就会导致无法获取dom对象
2- onload 事件在整个页面加载完成之后才触发
可以给window绑定onload事件
此事件的回调处理函数在页面加载完成时候执行
确保咱们可以执行所有的dom对象
*/
</script>
06文档加载2
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
<script type="text/javascript" src="06.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<div id="div">hello world</div>
<!--
当点击按钮时使 div的内容修改为 hello js
-->
07dom元素访问
<button id="btn">按钮</button>
<button class="c1">按钮</button>
<button class="c1">按钮</button>
<button>按钮</button>
<button name="btn1" class="c1">按钮</button>
<button name="btn1">按钮</button>
<script type="text/javascript">
// 根据指定id信息获取元素对象，返回:对象
var btn = document.getElementById("btn")
console.log(btn)
// 根据指定标签信息获取元素对象的集合 返回:数组
var button = document.getElementsByTagName("button")
console.log(button)
// 根据指定name信息获取元素对象，返回:数组
var btn1 = document.getElementsByName("btn1")
console.log(btn1)
// 根据指定class信息获取元素对象，返回:数组
var c1 = document.getElementsByClassName("c1")
console.log(c1)
// 点击按钮修改p中的内容为hello kitty
</script>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<button id="button">按钮</button>
<script type="text/javascript">
// 根据id名称获取指定元素button，返回一个button对象
var btn = document.getElementById("button")
// var btn = document.getElementsByTagName("button")[0]
// 根据标签名称获取指定元素p ，返回一个数组 数组中包含多个p对象
var p = document.getElementsByTagName("p")
// 给btn注册单击事件
btn.onclick = function(){
// 当事件触发
// 循环遍历数组中的每一个元素
for(var i=0;i < p.length;i++){
// console.log(p[i])
// 设置元素的内容为 hello kitty
p[i].innerHTML = "hello kitty"
}
}
</script>
08全选全不选
功能：
①全选按钮：点击后所有爱好都选中 – 1.#checkedAllBtn
②全不选按钮：点击后所有爱好都选中 – 2.#checkedNoBtn
③反选按钮：点击后所有爱好选中状态反转 – 3.#checkedRevBtn
④提交按钮：点击后依次弹出选中内容 – 4.#sendBtn
⑤全选框：点击后让所有爱好的选中状态和自己一致 – 5.#checkedAllBox
⑥爱好框：点满后将全选框选中，否则取消选中 – 6.items
<script type="text/javascript">
window.onload = function(){
// 获取四个多选框
var items = document.getElementsByName("items")
console.log(items)
// 获取多选框 全选全不选
var checkedAllBox = document.getElementById("checkedAllBox")
/*
全选
*/
// 获取全选按钮
var checkedAllBtn = document.getElementById("checkedAllBtn")
console.log(checkedAllBtn)
checkedAllBtn.onclick = function(){
for(var i = 0; i < items.length;i++){
items[i].checked = true
}
checkedAllBox.checked = true
}
/*
全不选
*/
// 获取全不选按钮
var checkedNoBtn = document.getElementById("checkedNoBtn")
console.log(checkedNoBtn)
checkedNoBtn.onclick = function(){
for(var i = 0; i < items.length;i++){
items[i].checked = false
}
checkedAllBox.checked = false
}
/*
全选全不选
*/
// 给全选全不选多选框注册点击事件
checkedAllBox.onclick = function(){
for(var i = 0; i < items.length;i++){
items[i].checked = this.checked
}
}
/*
提交按钮 ：当点击提交按钮时 选中的都弹窗
*/
var sendBtn = document.getElementById("sendBtn")
console.log(sendBtn)
sendBtn.onclick = function(){
for(var i = 0; i < items.length;i++){
if(items[i].checked){
alert(items[i].value)
}
}
}
/*
反选
*/
// 获取反选按钮
var checkedRevBtn = document.getElementById("checkedRevBtn")
checkedRevBtn.onclick = function(){
checkedAllBox.checked = true
for(var i = 0; i < items.length;i++){
/* if(items[i].checked){
items[i].checked = false
}else{
items[i].checked = true
} */
items[i].checked = !items[i].checked;
if(!items[i].checked){
checkedAllBox.checked = false
}
}
}
/*
items
如果四个多选框都被选中，则checkedAllBox选中
如果四个多选框都被没选中，则checkedAllBox没选中
*/
// 遍历四个爱好多选框 并给其绑定事件
for(var i = 0 ;i < items.length; i++){
items[i].onclick = function(){
checkedAllBox.checked = true
//
for(var j = 0; j < items.length;j++){
console.log(j)
/* !true = false
!true = false
!false = true */
// 判断如果四个爱好中有一个为false 则全选全不选多选框也为false
if(!items[j].checked){
checkedAllBox.checked = false
}
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
09复习
// 根据id 返回 对象
document.getElementById()
// 根据类名 返回 数组
document.getElementsByClassName()
// 根据name属性值 返回 数组
document.getElementsByName()
// 根据标签 返回 数组
document.getElementsByTagName()
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: #F0C78A;
}
</style>
</head>
<body>
<button id="btn">按钮</button>
<div></div>
<img src="练习一/img/1.jpg" >
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn")
btn.onclick = function(){
alert("abc")
}
var dv = document.getElementsByTagName("div")[0]
dv.onmouseover = function(){
dv.innerHTML = "abc"
}
var img = document.getElementsByTagName("img")[0]
img.src="练习一/img/2.jpg"
}
10dom查询的其他方法
1–// 获取body标签
var body = document.getElementsByTagName("body")[0]
console.log(body)
// body也是document对象的一个属性 ,保存的是body的引用
var body1 = document.body
console.log(body1)
2–// 获取html根标签
var html = document.documentElement;
console.log(html)
3–// 获取页面中所有的元素
var all = document.all
console.log(all)
console.log(all.length)
for(var i = 0; i < all.length;i++){
console.log(all[i])
}
4–// 根据选择器获取指定元素信息 querySelector
var q = document.querySelector(".c1")
console.log(q)
var q1 = document.querySelectorAll(".c1")
console.log(q1)
console.log(q1[0])
11dom查询
var ul = document.getElementsByTagName("ul")[0]
1–// 获取ul下所有的子元素
var children1 = ul.children
console.log(children1)
2–// 获取ul下所有的子节点
var children2 = ul.childNodes
console.log(children2)
3–// 获取ul的父节点
var parent1 = ul.parentNode
console.log(parent1)
4–// 获取ul的父元素
var parent2 = ul.parentElement
console.log(parent2)
5–// 获取ul的第一个子节点
var first1 = ul.firstChild
console.log(first1)
6–// 获取ul的第一个子元素
var first2 = ul.firstElementChild
console.log(first2)
7–// 获取ul的上一个兄弟节点
var brother1 = ul.previousSibling
console.log(brother1)
8–// 获取ul的下一个兄弟节点
var brother2 = ul.nextSibling
console.log(brother2)
9–// 获取ul的上一个兄弟元素
var brother3 = ul.previousElementSibling
console.log(brother3)
10–// 获取ul的下一个兄弟元素
var brother4 = ul.nextElementSibling
console.log(brother4)
12dom的增删查
// 创建一个元素
var p = document.createElement("p")
console.log(p)
// 创建一个新的文本节点
var text = document.createTextNode("erhuo")
console.log(text)
// 给p标签添加一个节点
p.appendChild(text)
// 在指定元素之前添加新创建的元素
// 将p添加到li之前
ul.insertBefore(p,li)
将li元素删除
ul.removeChild(li)
参数一：要替换的内容 参数2：被替换的内容
ul.replaceChild(p,li2)
13dom操作css
<style type="text/css">
div{
width:200px;
height:200px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div id="dv"></div>
<script type="text/javascript">
var dv = document.getElementById("dv")
// 100 X 100 粉色
dv.style.width = "100px"
dv.style.height = "100px"
dv.style.backgroundColor = "yellowgreen"
</script>
14读取元素的样式
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<button id="btn">按钮</button>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0]
var btn = document.getElementById("btn")
btn.onclick = function(){
// console.log(div.currentStyle.width)
// div.style.width="300px"
// alert(div.style.backgroundColor)
// 获取当前元素样式
// 这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式
/*
参数：
1.要获取样式的元素
2.可以传递一个伪元素，一般传null
*/
var obj = window.getComputedStyle(div,null)
console.log(obj.width)
console.log(obj.backgroundColor)
// 通过该方法读取到样式都是只读的不能修改
// obj.width = "500px"
var g = getStyle(div,"width")
console.log(g)
}
/*
定义一个函数：获取指定的元素信息
参数1： 指定获取元素信息的元素
参数2： 获取元素的样式名
*/
function getStyle(element,name){
if(window.getComputedStyle){
return window.getComputedStyle(element,null)[name]
}else{
return element.currentStyle.name
}
}
</script>
15其他样式操作属性
<style>
*{
margin: 0;
padding: 0;
}
#dv1{
width: 200px;
height: 200px;
background-color: deeppink;
/* 边框 10像素 实线 黄色*/
border:10px solid yellow;
/* 内边距 上下左右 都为10像素 */
padding:10px;
/* 外边距 上下左右 都为10像素 */
/* margin: 22px; */
}
#dv2{
width: 50px;
height: 50px;
background-color: cyan;
}
</style>
</head>
<body id="by">
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01")
var dv1 = document.getElementById("dv1")
btn01.onclick = function(){
/*
1- 获取到元素的宽高时 值得类型是Number 不带px 可以直接进行运算
2- 获取元素的宽度和高度，包含内容与内边距
3- 获取的都是可见的宽高
4- 属性是不能进行修改的
*/
// var height = dv1.clientHeight
// var width = dv1.clientWidth
// console.log(height,width)
/*
1- 获取元素的宽度与高度,包含内容,边框,内边距
*/
// var height = dv1.offsetHeight
// var width = dv1.offsetWidth
// console.log(height,width)
// var parent = dv1.offsetParent
// console.log(parent)
// var parent = dv2.offsetParent
// console.log(parent)
// console.log(parent.id)
// // 获取当前元素的水平偏移量
// var left = dv1.offsetLeft
// // 获取当前元素的垂直偏移量
// var top = dv1.offsetTop
// console.log(left,top)
/*
获取的是当前元素的滚动区域 的宽度与高度
*/
// var height = dv2.scrollHeight
// var width = dv2.scrollWidth
// console.log(width,height)
var left = dv1.scrollLeft
var top = dv1.scrollTop
console.log(top,left)
}
var left = dv1.scrollLeft
var top = dv1.scrollTop
console.log(top,left)
}
</script>
<div id="dv1">
<div id="dv2"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<button id="btn01">按钮</button>
2864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
