【JAVA WEB】获取/修改元素属性&&表单元素属性&&样式属性以及如何操作DOM树中的节点-Toy模板网

这篇具有很好参考价值的文章主要介绍了【JAVA WEB】获取/修改元素属性&&表单元素属性&&样式属性以及如何操作DOM树中的节点。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

获取/修改元素属性

获取/修改表单元素属性

切换按钮的文本

实现计数器

全选/取消全选按钮

获取/修改样式属性

行内样式操作

类名样式操作

操作节点

新增节点

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>

修改前：

【JAVA WEB】获取/修改元素属性&&表单元素属性&&样式属性以及如何操作DOM树中的节点,Java Web,前端,java,python

修改后：

【JAVA WEB】获取/修改元素属性&&表单元素属性&&样式属性以及如何操作DOM树中的节点,Java Web,前端,java,python

获取/修改表单元素属性

表单（主要指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>

效果如下【JAVA WEB】获取/修改元素属性&&表单元素属性&&样式属性以及如何操作DOM树中的节点,Java Web,前端,java,python

【JAVA WEB】获取/修改元素属性&&表单元素属性&&样式属性以及如何操作DOM树中的节点,Java Web,前端,java,python

获取/修改样式属性

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>

效果如下：

白天模式

【JAVA WEB】获取/修改元素属性&&表单元素属性&&样式属性以及如何操作DOM树中的节点,Java Web,前端,java,python

夜晚模式

【JAVA WEB】获取/修改元素属性&&表单元素属性&&样式属性以及如何操作DOM树中的节点,Java Web,前端,java,python

操作节点

新增节点

分成两个步骤

创建元素节点
把元素节点插入到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>

效果如下

【JAVA WEB】获取/修改元素属性&&表单元素属性&&样式属性以及如何操作DOM树中的节点,Java Web,前端,java,python

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>

效果如下

【JAVA WEB】获取/修改元素属性&&表单元素属性&&样式属性以及如何操作DOM树中的节点,Java Web,前端,java,python

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>

效果如下

【JAVA WEB】获取/修改元素属性&&表单元素属性&&样式属性以及如何操作DOM树中的节点,Java Web,前端,java,python 文章来源地址https://www.toymoban.com/news/detail-835903.html