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

2024-02-29 06:10:05 分类：前端 热度：33 评论： 0

【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>

修改前： 

 

修改后：

获取/修改表单元素属性

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

全选/取消全选按钮

  1. 点击全选按钮，则选中所有选项
  2. 只要某个选项取消，则自动取消全选按钮的勾选状态
<!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>

 效果如下：

白天模式

夜晚模式

 

操作节点 

新增节点

分成两个步骤

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

效果如下 

转载请说明出处内容投诉
CSS教程_站长资源网 » 【JAVA WEB】获取/修改 元素属性&&表单元素属性&&样式属性 以及如何操作DOM树中的节点
东亚

东亚

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买