Dom 及Dom相关练习

有潜力的web员工

于 2023-06-02 19:13:09 发布

阅读量188

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/webcass/article/details/131012751

版权

1.DOM是什么?

DOM树：文档对象模型（doucment object model)
文档：一个页面就是一个文档，是使用document表示的
节点：网页中所有的内容，在dom树中都是节点（标签、属性、文本、注释等等）,是使用node表示
标签节点：网页中所有的标签，也可以叫元素节点是使用element表示

2.通过标签名获取元素

通过标签名获取元素 getElementsByTagName 获取到的元素对象是一个伪数组,可以通过索引获取每一个元素
var divs = document.getElementsByTagName('div')
console.log(divs[0])
for (var i = 0; i < divs.length; i++) {
// console.log(divs[i])
}
如果通过getElementsByTagName拿到的元素，即使只有一个元素，也是以伪数组的形式返回
// 想拿到里层元素，可以通过父元素获取
var box = document.getElementById('box')
console.log(box)
var span = box.getElementsByTagName('span')
console.log(span)

3.H5提供的方式

querySelector 返回指定选择器的第一个元素如果是获取类名需要类名前加.点 ,通过id获取时需要加#
var box = document.querySelector('.box')
var li = document.querySelector('li')
var lis = document.querySelector('#li')
// console.log(box)
// console.log(lis)

// querySelectorAll 返回指定选择器的所有元素集合
var boxs = document.querySelectorAll('.box')
console.log(boxs)
</script>

4.获取body和html

// document.body获取body元素
var body = document.body
console.log(body)
// document.documentElement 获取html
var html = document.documentElement
console.log(html)

5.事件三要事

js其实就是让页面动态展示，
事件流程：鼠标触发----响应（执行）
事件三要素：
1、事件源（触发了谁）：触发事件的元素
2、事件类型：click事件 mousermove等鼠标事件
3、事件处理程序：事件触发后要执行的代码，执行函数

*/
// 获取元素
var btn = document.querySelector('button')
console.log(btn)
// 事件类型通过函数赋值的方式
btn.onclick = function () {
// 事件执行函数
// alert('我被弹出了')
console.log('btn被点击了')
}

6.事件案例

<div class="div">111</div>
<span>我是行内</span>
<script>
// 获取元素
var div = document.querySelector('.div')
var span = document.querySelector('span')
// 绑定事件注册事件类型
div.onclick = function () {
alert('谁都可以注册点击时间')
}
span.onclick = function () {
alert('span谁都可以注册点击时间')
}
</script>

7.常见事件

<div class="div">111</div>
<br>
<input type="text">
<script>
// 获取元素
var div = document.querySelector('.div')
var input = document.querySelector('input')
// console.dir(div)

// onblur input框事件 input框失去焦点时触发
// onclick 鼠标点击时触发的事件
// onchange input框事件 input内容发生改变后失去焦点触发的时间
// oninput //input框事件 input内容只要发生改变就会触发
//onfocus //input框事件只要input获取焦点就会触发
//onmouseleave //鼠标离开事件源触发的事件
//onmousemove //鼠标在事件源上移动就会触发
// input.onblur = function () {
// console.log('onblur事件')
// }
// input.onchange = function () {
// console.log('onchange事件')
// }
// input.oninput = function () {
// console.log('oninput事件')
// }
// input.onfocus = function () {
// console.log('onfocus事件')
// }

// div.onmouseleave = function () {
// console.log('onmouseleave事件')
// }
div.onmousemove = function () {
console.log('onmousemove事件')
}

8.改变元素内容

<div class="div"><span>
111
222
</span></div>
<br>

<input type="text">
<div>输入的内容是：<span></span></div>
<script>
// 获取元素
var div = document.querySelector('.div')
var input = document.querySelector('input')
var span = document.querySelector('span')

// 点击第一个div盒子时把111变成222

// innerText 改变元素内容获取元素内容会去掉空格和换行不会去识别html标签
// innerHTML 改变元素内容获取元素内容会保留空格和换行会识别html标签
var flag = true
div.onclick = function () {
// console.log(111111)
// 改变元素内容 innerText
// if (flag) {
// div.innerText = '222'
// flag = !flag
// } else {
// div.innerText = '111'
// flag = !flag
// }

// div.innerHTML = '222'
// console.log(div.innerText)
// console.log(div.innerHTML)
// div.innerText = '<h1>我是标题</h1>'
// div.innerHTML = '<h1>我是标题</h1>'

}
</script>

9.倒计时

<body>
<button>倒计时</button>
<div class="box"></div>
<script>
// 获取元素
var div = document.querySelector('.box')
var btn = document.querySelector('button')
btn.onclick = function () {

div.innerHTML = getTime()
}
function getTime() {
var nowTime = +new Date() //现在的时间
var oldTime = +new Date('2023-6-18 20:00:00') //目标时间
var time = (oldTime - nowTime) / 1000 //把毫秒数变成秒数
var d = parseInt(time / 60 / 60 / 24) //天数
var h = parseInt(time / 60 / 60 % 24) //小时
var m = parseInt(time / 60 % 60) //分钟
var s = parseInt(time % 60) //秒
return '距离618还有' + d + '天' + h + '时' + m + '分' + s + '秒'
}
</script>
</body>

10.通过元素属性

<body>
<img src="./img1.jpg" alt="" title="美女">
<input type="text">
<script>
// 获取元素
var img = document.querySelector('img')
var flag = true
img.onclick = function () {
// 通过修改img标签的src属性进行更改图片语法：元素对象名.属性名
if (flag) {
img.src = 'JavaScript组成.png'
img.title = 'JavaScript组成'
flag = !flag
} else {
img.src = 'img1.jpg'
img.title = '美女'
flag = !flag
}
}
</script>
</body>

11.this问题

<body>
<div>你好呀</div>
<span>开黑不</span>
<script>
var div = document.querySelector('div')
var span = document.querySelector('span')

div.onclick = function () {
// div.innerHTML = 'hello'
// this指向事件源谁创建的事件就是指向谁
this.innerHTML = 'hello'
// span.innerHTML = '不开黑'
this.innerHTML = '不开黑'
}

function Get(uname) {
this.uname = uname
}
var obj = new Get('张三')
console.log(obj.uname)
</script>
</body>

12.修改input内容

<body>
<button>按钮</button>
<input type="text" value="西瓜">
<script>
var btn = document.querySelector('button')
var input = document.querySelector('input')
// 置灰禁用
btn.onclick = function () {
input.value = '跳跳糖'
// 按钮置灰
this.disabled = true
}

</script>
</body>

13.操作style属性

<body>
<div>六一儿童节快乐呀</div>
<script>
var div = document.querySelector('div')
div.onclick = function () {
// 修改样式时，属性是驼峰命名
// 元素对象.style.样式属性=值
// 通过style修改的样式是行内样式，层级比较高但是要少用，
this.style.backgroundColor = 'red'
this.style.color = 'white'

}

// 初始化一个宽高都是100px的盒子，鼠标点击时改变宽高为200px 字体颜色为绿色，字体大小为48px
// 背景颜色改为红色

</script>

14.练习style属性

<body>
<div>六一儿童节快乐呀</div>
<script>
// 初始化一个宽高都是100px的盒子，鼠标点击时改变宽高为200px 字体颜色为绿色，字体大小为48px
// 背景颜色改为红色
var div = document.querySelector('div')
div.onclick = function () {
this.style.width = '200px'
this.style.height = '200px'
this.style.backgroundColor = 'red'
this.style.color = 'green'
this.style.fontSize = '48px'

}

</script>

15.操作className

}

.box {
background-color: red;
font-size: 48px;
}
</style>
</head>

<body>
<div class="div">六一儿童节快乐呀</div>
<script>
var div = document.querySelector('div')
// console.dir(div)
div.onclick = function () {
// className class关键字
// 元素对象.className='类名'
// 第一步类名要存在(已经设置了样式)
// 第二步设置类名
// 如果元素本身存在其他的class值时，直接给className赋值其他的class类名时，会覆盖之前存在的class类名，
// 如果不想丢失之前的class类名我们需要className赋值的时候同时带上之前的class类名语法为：this.className = 'div box'
// this.className = 'box'
this.className = 'div box'
}

</script>
</body>

16.练习className

<style>
.div {

width: 100px;
height: 100px;
float: left;
margin-left: 10px;
background-color: red;
}

.box {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
background-color: red;

}
</style>
</head>

<body>
<div class="div">六一儿童节快乐呀</div>
<div class="div">六一儿童节快乐呀</div>
<div class="div">六一儿童节快乐呀</div>
<div class="div">六一儿童节快乐呀</div>
<span></span>
<script>
var divs = document.getElementsByTagName('div')
// var div = document.querySelector('div')
for (var i = 0; i < divs.length; i++) {
divs[i].onmousemove = function () {

this.className = 'box'
}
divs[i].onmouseleave = function () {

this.className = 'div'
}
}
// console.dir(div)
// div.onmousemove = function () {l

// this.className = 'box'
// }

// div.onmouseleave = function () {

// this.className = 'div'
// }

</script>
</body>

17.多个盒子样式变化

.div {

width: 100px;
height: 100px;
float: left;
margin-left: 10px;
background-color: red;
}

.box {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
background-color: red;

}
</style>
</head>

<body>
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<script>
var divs = document.getElementsByClassName('div')
for (var i = 0; i < divs.length; i++) {
// divs[i].onmousemove = function () {
// this.className = 'box'
// }
// divs[i].onmouseleave = function () {
// this.className = 'div'
// }
// 排他思想：再给自己设置样式时先移除所有元素的样式
// 如果同时有多个标签时，需要设置相同样式,在鼠标移入移出时要先移除其他元素的样式，再给自己设置样式（先干掉所有人，只留下自己）
divs[i].onmousemove = function () {
console.log(this)
for (var i = 0; i < divs.length; i++) {
divs[i].className = ''
}
this.className = 'box'
}
divs[i].onmouseleave = function () {
for (var i = 0; i < divs.length; i++) {
divs[i].className = ''
}
this.className = 'div'
}
}

</script>
</body>

18自定义属性

<div class="div" id="div" data="1">1</div>
<div class="div" id="div" data="2">1</div>
<div class="div" id="div" data="3">1</div>
<div class="div" id="div" data="4">1</div>
<script>
// 自定义属性
// 获取自定义的属性
// 获取元素
var div = document.querySelector('.div')
// 获取元素的属性值元素对象.属性这种方式没法获取自定义的属性
// 如果获取的是元素对象的class类名时需要写className,
// console.log(div.className)
// console.log(div.data)

// getAttribute('自定义属性名') 获取自定义属性也可以获取自带的属性
console.log(div.getAttribute('data')) //1
console.log(div.getAttribute('id'))

</script>

19.自定义练习

table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
}

th,
td {
border: 1px solid #d0d0d0;
padding: 10px;
}

.color {
background-color: #eaeefb;
}
</style>

</head>

<body>
<div class="box">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="check" />
</th>
<th>日期</th>
<th>姓名</th>
<th>地址</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>2016-5-3</td>
<td>黄小虎</td>
<td>上海市普陀区金沙江路 1518 弄</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2016-5-3</td>
<td>黄小虎</td>
<td>上海市普陀区金沙江路 1518 弄</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2016-5-3</td>
<td>黄小虎</td>
<td>上海市普陀区金沙江路 1518 弄</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2016-5-3</td>
<td>黄小虎</td>
<td>上海市普陀区金沙江路 1518 弄</td>
</tr>

</tbody>
</table>
</div>
<script>
// 获取元素
var check = document.getElementById('check');//全选框
var tb = document.getElementById('tb');
var inputs = tb.getElementsByTagName('input') //单选框
var trs = tb.querySelectorAll('tr') //

for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () {
this.className = 'color';
}
// 4. 鼠标离开事件 onmouseout
trs[i].onmouseleave = function () {
this.className = '';
}

}
// 全选框的点击事件
check.onclick = function () {
console.log(this.checked);
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = this.checked;
}
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function () {
var flag = true;
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].checked) {
flag = false;
break
}
}
check.checked = flag;
}
}
</script>
</body>

20.设置自定义属性

<div class="box">
111111
</div>
<script>
// 获取元素
var div = document.querySelector('.box')
// 设置自带属性元素对象.属性名='值' 使用这种方式不能设置自定义的属性
div.onclick = function () {
// div.id = 'box'
// div.data = '1'
// setAttribute('属性','值') 设置自定义属性也可以设置自带的属性
div.setAttribute('data', '1')
div.setAttribute('id', 'box')
}

</script>

21.移除自定义属性

<div class="box" data="1">
111111
</div>
<script>
// 获取元素
var div = document.querySelector('.box')
// 设置自带属性元素对象.属性名='值' 使用这种方式不能设置自定义的属性
div.onclick = function () {
// div.id = 'box'
// div.data = '1'
// setAttribute('属性','值') 设置自定义属性也可以设置自带的属性
// div.setAttribute('data', '1')
// div.setAttribute('id', 'box')
div.removeAttribute('data')
}

</script>

22.自定义练习

1 -找到所有的按钮，并循环
2 -给按钮添加点击事件
3 -点击的时候获取的对应的按钮获取按钮对应的下标
4 - 所有的都变为黑点击的按钮颜色变为红色
5 - 其他的所有ul 都隐藏按钮对应ul显示
*/
let btns = document.querySelectorAll('button') //按钮
let oUls = document.querySelectorAll('ul') //所有ul

for (let i = 0; i < btns.length; i++) {
// 点击每个按钮时
btns[i].onclick = function () {
// 遍历每个按钮，改每个按钮颜色改成白色以及隐藏所有的ul
for (let j = 0; j < btns.length; j++) {
btns[j].style.color = 'black'
// 让所有的ul隐藏
oUls[j].style.display = 'none'
}

this.style.color = 'red'

oUls[i].style.display = 'block'
}
}

</script>

23.节点

24.父节点

<div class="box">
<div class="sbox"></div>
</div>
<script>
var sbox = document.querySelector('.sbox')
// parentNode 父节点语法：子元素对象.parentNode 一直朝上查找父节点，知道找到document 再朝上查找就会返回null
console.log(sbox.parentNode.parentNode.parentNode.parentNode.parentNode)

// parentElement 终端父节点是html 再朝上查找就会返回null
console.log(sbox.parentElement.parentElement.parentElement.parentElement)
</script>

25.子节点

// children 伪数组获取所有子节点的元素，不包含空格注释等 ie9以上才会支持
// console.log(ul.children)

// firstChild 拿到的是第一个子节点（如果第一个是空格拿到的就是空格）
// firstElementChild 拿到是第一个子元素
console.log(ul.firstChild)
console.log(ul.firstElementChild)
// lastChild 拿到的是最后一个子节点如果有空格拿到的就是空格
console.log(ul.lastChild)
console.log(ul.lastElementChild)
</script>

26.兄弟节点

<ul>
<li>1</li>上<li class="lili">2</li>下

// previousSibling 查找上一个兄弟节点（如果有空格查找的就是空格）
console.log(lili.previousSibling)

// previousElementSibling 查找上一个兄弟元素
console.log(lili.previousElementSibling)
</script>

27.创建节点

// 替换节点 replaceChild(新的节点，老的节点)
box.replaceChild(div2, box1)

// 克隆节点cloneNode() 如果括号内为空/false 则是浅拷贝（只克隆自己）
// 如果括号内为true 则是深拷贝（也会克隆自己的子孙后代）
var clone = box.cloneNode(true)
console.log(clone)
</script>

28.练习1

</ul>
<button class="btns">新增</button>
<ul class="ul2">

</ul>
<script>
var arr = ['王多磊', '丁龙祥', '王金刚', '郑日安', '王玉']
var ul = document.querySelector('.ul')
var ul2 = document.querySelector('.ul2')
var ipt = document.querySelector('.ipt')
var btns = document.querySelector('.btns')
for (var i = 0; i < arr.length; i++) {
var li = document.createElement('li')
li.innerHTML = arr[i]
ul.appendChild(li)
var btn = document.createElement('button')
li.appendChild(btn)
btn.innerHTML = '删除'
btn.onclick = remove
}
function remove() {
console.log(111)
this.parentNode.remove()
}
var num = 1
btns.onclick = function () {
var lis = document.createElement('li')
ul2.appendChild(lis)
lis.innerHTML = num
var btn = document.createElement('button')
btn.innerHTML = '修改'
num++
}
</script>

29.练习2

table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
min-width: 300px;
}

th,
td {
border: 1px solid #d0d0d0;
padding: 10px;
}

.color {
background-color: #eaeefb;
}
</style>

</head>

</tbody>
</table>
<script>
// 获取元素
var check = document.getElementById('check');//全选框
var tb = document.getElementById('tb');
var inputs = tb.getElementsByTagName('input') //单选框
var trs = tb.querySelectorAll('tr') //
var btn = document.querySelector('.btn')

for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () {
this.className = 'color';
}
// 4. 鼠标离开事件 onmouseout
trs[i].onmouseleave = function () {
this.className = '';
}

}
btn.onclick = function () {
var tr = document.createElement('tr')
var td = document.createElement('td')
td.className = 'td'
var td1 = document.createElement('td')
var td2 = document.createElement('td')
tb.append(tr)
tr.append(td)
tr.append(td1)
tr.append(td2)
var ipt = document.createElement('input')
ipt.className = 'ipt'
var ipt1 = document.createElement('input')
ipt1.className = 'ipt1'
var ipt2 = document.createElement('input')
ipt2.className = 'ipt2'
td.appendChild(ipt)
td1.appendChild(ipt1)
td2.appendChild(ipt2)
var bt = document.createElement('button')
bt.innerHTML = '提交'
bt.className = 'bt'
var bt1 = document.createElement('button')
bt1.innerHTML = '提交'
bt1.className = 'bt1'
var bt2 = document.createElement('button')
bt2.innerHTML = '提交'
bt2.className = 'bt2'
td.appendChild(bt)
td1.appendChild(bt1)
td2.appendChild(bt2)
ipt.oninput = handleChange
bt.onclick = handleBtn
}
var val = ""
function handleBtn() {
if (!val) return alert('请输入内容在进行提交')
var ipt = document.querySelector('.ipt')
var bt = document.querySelector('.bt')
var td = document.querySelector('.td')
ipt.style.display = 'none'
bt.style.display = 'none'
td.innerHTML = val

}

function handleChange() {
val = this.value
}
</script>
</body>

30.练习3

</ul>
<script>
// var arr = ['王多磊', '丁龙祥', '王金刚', '郑日安', '王玉',]
var btns = document.querySelector('.btns')
var ul2 = document.querySelector('.ul2')
var num = 1
btns.onclick = function () {
// 创建节点
var li = document.createElement('li')
ul2.appendChild(li)

li.innerHTML = num
num++
}
</script>

31.练习4

</ul>

btn.onclick = function () {
if (num > 4) return
var li = document.createElement('li')
li.innerHTML = arr[num]
ul.appendChild(li)
var btns = document.createElement('button')
btns.innerHTML = '删除'
btns.id = 'btns'
li.appendChild(btns)
num++
btns.onclick = remove
}

function remove() {
this.parentNode.remove()
}

</script>

有潜力的web员工

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom 及Dom相关练习

1.DOM是什么?2.通过标签名获取元素3.H5提供的方式4.获取body和html5.事件三要事6.事件案例7.常见事件8.改变元素内容9.倒计时10.通过元素属性11.this问题12.修改input内容13.操作style属性14.练习style属性15.操作className16.练习className17.多个盒子样式变化18自定义属性19.自定义练习20.设置自定义属性21.移除自定义属性22.自定义练习
复制链接

扫一扫