Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
js DOM Exercises
Click the button to li background color of odd columns to red, even columns li background color to green
<!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>
By clicking on the button on the page, switch to achieve the theme
Theme 1: black and white
theme 2: Foundation Green word
<!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>
A function package, compatible with all browsers, made the tag by class name.
incompatible xxx.getElementsByClassName () IE8 and earlier browsers, define a function, to achieve this function
<!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>
Click the button, create a table in three rows and four columns on a page
<!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>
Tables dynamically add, delete
<!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>
Wrapper function implemented lookup sibling (next, previous), filtered text node
<!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>
Click on the picture to switch 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>