目录
获取/修改元素属性
获取/修改表单元素属性
切换按钮的文本
实现计数器
全选/取消全选按钮
获取/修改样式属性
行内样式操作
类名样式操作
操作节点
新增节点
1.创建元素节点
2.插入节点到dom树中
删除节点
获取/修改元素属性
可以通过Element对象的属性来直接修改，就能影响到页面显示效果
如下示例
<body>
<img src="male.png" title="这是一个提示图片" width="100px" height="=100px">
</body>
<script>
let img = document.querySelector('img')
img.title = "这是已经修改的title"
</script>
修改前：
修改后：
获取/修改表单元素属性
表单（主要指input标签）的以下属性可以通过DOM修改
value：input的值disabled：禁用checked：复选框会使用selected：下拉框会使用type：input的类型（文本，密码，按钮，文件等）代码示例：
切换按钮的文本
假设这是个播放按钮，在“播放” - “暂停” 之间切换
<body>
<input class="btn" type="button" value="播放">
</body>
<script>
let btn = document.querySelector('.btn')
btn.onclick = function(){
if(btn.value == "播放")
{
btn.value = "暂停"
}
else
{
btn.value = "播放"
}
}
</script>
实现计数器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input class="input" type="text" name="" id="" value="0"> <input calss="add" type="button" value="+1" onclick="Add()"> <input class="min" type="button" value="-1" onclick="Min()"></body><script> function Add(){ let input_element = document.querySelector('.input') input_element.value = parseInt(input_element.value) + 1 } function Min(){ let input_element = document.querySelector('.input') input_element.value = parseInt(input_element.value) - 1 }</script></html>全选/取消全选按钮
点击全选按钮，则选中所有选项只要某个选项取消，则自动取消全选按钮的勾选状态<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input class="all" type="checkbox" name="" id="" onclick="SelectAll()">选中全部<br> <input type="checkbox" class="select">选项1<br> <input type="checkbox" class="select">选项2<br> <input type="checkbox" class="select">选项3<br></body><script> let all = document.querySelector('.all') let select = document.querySelectorAll('.select') // 点击全选按钮，则选中所有选项 function SelectAll() { for(i = 0; i < select.length; i++) { select[i].checked = all.checked } } // 只要某个选项取消，则自动取消全选按钮的勾选状态 for(i = 0; i < select.length; i++) { select[i].onclick = function() { all.checked = IsSelectAll(select) } } function IsSelectAll(select){ for(i = 0; i<select.length; i++) { if(select[i].checked == false) { return false; } } return true; }</script></html> 效果如下
获取/修改样式属性
CSS中指定给元素的属性，可以通过JS来修改
行内样式操作
element.style.[属性名] = [属性值]
element.style.cssText = [属性名+属性值]
行内样式，通过style直接在标签上指定的样式，优先级很高，适用于改的样式少的情况
示例：
实现点击文字放大字体
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div style="font-size:10px;" onclick="ChangeSize()">哈哈哈</div></body><script> function ChangeSize(){ let element = document.querySelector('div') let size = parseInt(element.style.fontSize) + 10; element.style.fontSize = size + 'px' //第一种写法 //element.style.cssText = "font-size:" + size +"px" 第二种写法 }</script></html>PS：上述方法只能影响到特定样式，其他内联样式的值不变
类名样式操作
element.className = [CSS 类名]
修改元素的CSS类名，适用于要修改的样式有很多
代码示例：开启夜间模式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .light{ background-color: aliceblue; color: black; width: 100%; height: 100%; } body,html{ width: 100%; height: 100%; } .dark { background-color: black; color: white; width: 100%; height: 100%; } </style></head><body> <div class="light" onclick="changeStyle()"> 这是一段话<br> 这是一段话<br> 这是一段话<br> 这是一段话<br> 这是一段话<br> 这是一段话<br> 这是一段话<br> </div></body><script> function changeStyle(){ let element = document.querySelector('div') //如果当前的样式是白天模式，将其切换到黑夜模式 //否则就将当前样式切换到白天模式 if(element.className == "light") { element.className = "dark" } else { element.className = "light" } }</script></html>效果如下：
白天模式
夜晚模式
操作节点
新增节点
分成两个步骤
创建元素节点把元素节点插入到dom树中第一步相当于生了个娃，第二步相当于给娃上户口
1.创建元素节点
let element = document.createElement(tagName[, options]) //tagName 标签
2.插入节点到dom树中
有两种方法：
1>使用appendChild将节点插入到指定节点的最后一个孩子之后
element.appendChild(achild)
<body>
<div>
<p>这是标签1</p>
<p>这是标签2</p>
<p>这是标签3</p>
</div>
</body>
<script>
//创建
let element = document.createElement('h3')
element.innerHTML = "这是我们创建的一个新的节点"
//插入
let div = document.querySelector('div')
div.appendChild(element)
</script>
效果如下
2>使用insertBefore将节点插入到指定节点之前
let insertNode = parentNode.insertBefore(newNode, referenceNode)
insertNode 被插入节点（newNode）parentNode 新插入节点的父节点newNode 用于插入的节点referenceNode newNode将要插在这个节点之前如果referenceNode为null 则newNode将插入到子节点的末尾
示例：
<body>
<div>
<p class="p1">这是标签1</p>
<p>这是标签2</p>
<p>这是标签3</p>
</div>
</body>
<script>
//创建
let newNode = document.createElement('p')
newNode.innerHTML = "这是一个新p标签"
//插入
let div = document.querySelector('div')
div.insertBefore(newNode,document.querySelector('.p1'))
</script>
效果如下
PS：
注意1：如果针对一个节点插入两次，则只有最后依次生效了（相当于把元素移动了）
注意2： 一旦一个节点插入完毕，再针对刚刚的节点对象进行修改，能够同步影响到DOM树中的内容
删除节点
使用removeChild删除子节点
oldchild = element.removeChild(child);
child为待删除节点element为child的父节点返回值为该被删除节点被删除的节点只是从dom树中被删除了，但是仍然存在内存中，可以随时加入到dom树的其他位置如果上例中的child节点不是element节点的子节点，则该方法会抛出异常<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div id="delete">4</div> </div></body></html><script> let parent = document.querySelector(".container") let child = document.querySelector("#delete") //要通过父元素才能删除子元素 parent.removeChild(child)</script>效果如下
