目录
获取/修改元素属性
可以通过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>效果如下
扫一扫
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
