版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
js DOM 练习题
点击按钮，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red {
background: red;
}
.green {
background: green;
}
</style>
</head>
<body>
<button>点击按钮变色</button>
<ul>
<li>li+1</li>
<li>li+2</li>
<li>li+3</li>
<li>li+4</li>
<li>li+5</li>
</ul>
<script>
//点击按钮，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色
document.querySelector('button').onclick = function () {//找到页面上的button 添加点击事件
var li = document.querySelectorAll('li');//用querySelectorAll得到所有的li
for (var i = 0; i < li.length; i++) {//因为用querySelectorAll得到的是一个伪数组 所以需要for循环遍历
if (i % 2 === 0) {//判断如果取余2等于0的话，就说明他是偶数
li[i].setAttribute('class', 'green')//用setAttribute属性设置class为green
}
else {
li[i].setAttribute('class', 'red')//用setAttribute属性设置class为red
}
}
//下面的方法，太麻烦了，不建议使用
// var odd=document.querySelectorAll('ul>li:nth-child(odd)');//用querySelectorAll得到ul下的奇数li
// for(var i=0;i<odd.length;i++){//for循环遍历
// odd[i].setAttribute('class','red');//用setAttribute属性添加class为red
// }
// var even=document.querySelectorAll('ul>li:nth-child(even)');//用querySelectorAll得到ul下偶数li
// for(var j=0;j<even.length;j++){//for循环遍历
// even[j].setAttribute('class','green');//用setAttribute属性添加class为green
// }
}
</script>
</body>
</html>
通过在页面上点击button，实现主题切换
主题1：黑底白字
主题2：粉底绿字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.zhuti1 {//主题1
background: black;
color: white;
}
.zhuti2 {//主题2
background: pink;
color: green;
}
</style>
</head>
<body>
<button>点击按钮变色</button>
<ul class="zhuti1">
<li>li+1</li>
<li>li+2</li>
<li>li+3</li>
<li>li+4</li>
<li>li+5</li>
</ul>
<script>
//通过在页面上点击button，实现主题切换
// 主题1：黑底白字
// 主题2：粉底绿字
var ul = document.querySelector('ul');//通过querySelector得到页面上的ul
var button = document.querySelector('button')//通过querySelector得到页面上的button
button.onclick = function () {//button的点击事件
if (ul.getAttribute('class') === 'zhuti1') {//判断是否为主题1如果是的话，用setAttribute属性改变class为zhuti2
ul.setAttribute('class', 'zhuti2');
}
else {//否则的话，用setAttribute属性改变class为zhuti1
ul.setAttribute('class', 'zhuti1');
}
}
</script>
</body>
</html>
封装一个函数，兼容所有浏览器，通过类名取得标签。
xxx.getElementsByClassName() IE8及以前的浏览器不兼容，定义一个函数，来实现这个功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.zhuti1 {
background: black;
color: white;
}
.zhuti2 {
background: pink;
color: green;
}
</style>
</head>
<body>
<button>点击按钮变色</button>
<ul class="zhuti1">
<li>li+1</li>
<li>li+2</li>
<li>li+3</li>
<li>li+4</li>
<li>li+5</li>
</ul>
<script>
// 封装一个函数，兼容所有浏览器，通过类名取得标签。
// xxx.getElementsByClassName() IE8及以前的浏览器不兼容，定义一个函数，来实现这个功能
function getClassName(classname) {//新建一个函数 参数为classname
var get = document.getElementsByClassName(classname)//用getElementsByClassName方法找到class值为参数的标签
//calssname是函数参数
if (get !== undefined) {//如果不为空，那么说明，不是ie浏览器
return get//直接输出
}
var all = document.querySelectorAll('*');//用querySelectorAll（‘*’）找到当前页面下所有的元素节点
//all是一个伪数组
var shuzu = []//新建数组
for (var i = 0; i < all.length; i++) {//for遍历
if (all[i].className === classname) {//判断如果元素节点的className属性与传进来的参数相等
//className是节点的属性
shuzu.push(all[i])//用数组的push方法，将符合条件的标签放到数组的最后面。
//push 将元素放到数组的最后面
}
}
return shuzu//返回数组
}
var a = getClassName('zhuti1')
console.log(a)
</script>
</body>
</html>
点击button，在页面上创建一个三行四列的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>创建表格</button>
<script>
//点击button，在页面上创建一个三行四列的表格。
document.querySelector('button').onclick = function () {
//取得页面上的button，并为button添加点击事件
//querySelector（‘button’）取得button
//onclick 点击事件
var tab = document.createElement('table');
//创建节点 节点标签为table
//createElement 创建节点
tab.border = 1;//table标签的border属性为1
tab.style.width = '500px'//table标签的内联样式 width为500px
tab.style.height = '500px'
document.body.appendChild(tab)//上树
//将table标签追加到父节点body的下面
//appendChild 父节点.appendChild（DOM节点）
for (var i = 0; i < 3; i++) {//for循环3行
var tr = document.createElement('tr')
//创建节点 节点标签为：tr
tab.appendChild(tr);//上树
//将tr标签追加到父节点table标签的下面
for (var j = 0; j < 4; j++) {//for循环4列
var td = document.createElement('td');
//创建节点 节点标签为 td
td.innerHTML = '1'
//innerHTML 在td标签里添加内容为1
td.style.textAlign = 'center';
// style 内联样式
//text-align 写成 textAlign
tr.appendChild(td)
//将td追加到父节点tr的下面
}
}
}
</script>
</body>
</html>
表格的动态添加、删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>添加表格</button>
<script>
//表格的动态添加、删除
var tab = document.createElement('table');
//创建元素节点 标签为 table
//createElement 创建节点
tab.border = 1;
//添加属性 属性名为border 属性值为1
document.body.appendChild(tab);
//将table追加到父节点body下
//appendChild 将节点追加到父元素的最后
var id = 1;
document.querySelector('button').onclick = function () {
//得到页面的button，并为其添加点击事件
//querySelect 得到页面上符合选择器的第一个节点
//onclick 点击事件
var tr = document.createElement('tr');
//创建元素节点 标签为 tr
tab.appendChild(tr);
//将tr追加到父节点table的最后
var td1 = document.createElement('td');
//创建第一个td节点 标签为td
td1.innerHTML = id
//用innerHTML属性把id放到td1标签的内容
var td2 = document.createElement('td')
//创建第二个td节点，标签为td
tr.appendChild(td1)
tr.appendChild(td2)
//分别将td1、td2追加到父节点tr的后面
var btn = document.createElement('button');
//创建节点 标签为 button
btn.innerHTML = '删除'
//button标签里的内容为 删除
td2.appendChild(btn)
//把button追加到父节点td2的最后
btn.onclick = function () {//点击事件
tab.removeChild(this.parentNode.parentNode);
//在点击删除按钮的时候，将按钮所在位置的tr删除
//this.parentNode 找到的是td2 找的是父节点
//this.parentNode.parentNode 找到的是tr
}
id++;
}
</script>
</body>
</html>
封装函数，实现查找兄弟节点（next、previous），过滤掉文本节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>li+1</li>
<li>li+2</li>
<li>li+3</li>
<li>li+4</li>
<li>li+5</li>
</ul>
<script>
//封装函数，实现查找兄弟节点（next、previous），过滤掉文本节点
function selectnode(node) {//定义函数
//node参数是一个节点
var previous = node.previousElementSibling;
//previousElementSibling 返回前一个兄弟元素节点
var next = node.nextElementSibling;
//nextElementSibling 返回下一个兄弟元素节点
var a = {//定义对象
previous: previous,
next: next
}
return a//返回对象a
}
var li2 = document.querySelector('ul>li:nth-child(2)')
//找到ul下的第二个li
var b = selectnode(li2);//调用函数
console.log(b.previous)
console.log(b.next)
</script>
</body>
</html>
点击td切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
td {
width: 50px;
height: 50px;
background: yellow;
border-radius: 50%;
cursor: pointer;
}
img {
width: 500px;
}
.select {
background: red;
}
</style>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<img src="" alt="">
</body>
<script>
var tds = document.querySelectorAll('td');//得到所有的td
var img = document.querySelector('img')//得到img
for (var i = 0; i < tds.length; i++) {//for循环
//因为我的图片的名称为1.jpg 2.jpg 3.jpg
//正好与td的索引加1，所对应
tds[i].index = i//保存下i
tds[i].onclick = function () {//点击事件
img.src = (this.index + 1) + '.jpg'//给img一个新的src
var s = document.querySelector('.select')//得到页面上
//class的值为select的td
if (s !== null) {
s.className = ''//如果不为空 清空
}
this.className = 'select'//给正在点击的td一个class
}
}
</script>
</html>