【JAVA WEB】获取/修改 元素属性&&表单元素属性&&样式属性 以及如何操作DOM树中的节点
目录
获取/修改元素属性
获取/修改表单元素属性
切换按钮的文本
实现计数器
全选/取消全选按钮
获取/修改样式属性
行内样式操作
类名样式操作
操作节点
新增节点
1.创建元素节点
2.插入节点到dom树中
删除节点
获取/修改元素属性
可以通过Element对象的属性来直接修改,就能影响到页面显示效果
如下示例
let img = document.querySelector('img')
img.title = "这是已经修改的title"
修改前:
修改后:
获取/修改表单元素属性
表单(主要指input标签)的以下属性可以通过DOM修改
- value:input的值
- disabled:禁用
- checked:复选框会使用
- selected:下拉框会使用
- type:input的类型(文本,密码,按钮,文件等)
代码示例:
切换按钮的文本
假设这是个播放按钮,在“播放” - “暂停” 之间切换
let btn = document.querySelector('.btn')
btn.onclick = function(){
if(btn.value == "播放")
{
btn.value = "暂停"
}
else
{
btn.value = "播放"
}
}
实现计数器
Document 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 }
全选/取消全选按钮
- 点击全选按钮,则选中所有选项
- 只要某个选项取消,则自动取消全选按钮的勾选状态
Document 选中全部
选项1
选项2
选项3
let all = document.querySelector('.all') let select = document.querySelectorAll('.select') // 点击全选按钮,则选中所有选项 function SelectAll() { for(i = 0; ielement.appendChild(achild)
这是标签1
这是标签2
这是标签3
//创建
let element = document.createElement('h3')
element.innerHTML = "这是我们创建的一个新的节点"
//插入
let div = document.querySelector('div')
div.appendChild(element)
效果如下
2>使用insertBefore将节点插入到指定节点之前
let insertNode = parentNode.insertBefore(newNode, referenceNode)
- insertNode 被插入节点(newNode)
- parentNode 新插入节点的父节点
- newNode 用于插入的节点
- referenceNode newNode将要插在这个节点之前
如果referenceNode为null 则newNode将插入到子节点的末尾
示例:
这是标签1
这是标签2
这是标签3
//创建
let newNode = document.createElement('p')
newNode.innerHTML = "这是一个新p标签"
//插入
let div = document.querySelector('div')
div.insertBefore(newNode,document.querySelector('.p1'))
效果如下
PS:
注意1:如果针对一个节点插入两次,则只有最后依次生效了(相当于把元素移动了)
注意2: 一旦一个节点插入完毕,再针对刚刚的节点对象进行修改,能够同步影响到DOM树中的内容
删除节点
使用removeChild删除子节点
oldchild = element.removeChild(child);
还没有评论,来说两句吧...