当前位置:   article > 正文

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

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

 

实现计数器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <input class="input" type="text" name="" id="" value="0">
  10. <input calss="add" type="button" value="+1" onclick="Add()">
  11. <input class="min" type="button" value="-1" onclick="Min()">
  12. </body>
  13. <script>
  14. function Add(){
  15. let input_element = document.querySelector('.input')
  16. input_element.value = parseInt(input_element.value) + 1
  17. }
  18. function Min(){
  19. let input_element = document.querySelector('.input')
  20. input_element.value = parseInt(input_element.value) - 1
  21. }
  22. </script>
  23. </html>

全选/取消全选按钮

  1. 点击全选按钮,则选中所有选项
  2. 只要某个选项取消,则自动取消全选按钮的勾选状态
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <input class="all" type="checkbox" name="" id="" onclick="SelectAll()">选中全部<br>
  10. <input type="checkbox" class="select">选项1<br>
  11. <input type="checkbox" class="select">选项2<br>
  12. <input type="checkbox" class="select">选项3<br>
  13. </body>
  14. <script>
  15. let all = document.querySelector('.all')
  16. let select = document.querySelectorAll('.select')
  17. // 点击全选按钮,则选中所有选项
  18. function SelectAll()
  19. {
  20. for(i = 0; i < select.length; i++)
  21. {
  22. select[i].checked = all.checked
  23. }
  24. }
  25. // 只要某个选项取消,则自动取消全选按钮的勾选状态
  26. for(i = 0; i < select.length; i++)
  27. {
  28. select[i].onclick = function() {
  29. all.checked = IsSelectAll(select)
  30. }
  31. }
  32. function IsSelectAll(select){
  33. for(i = 0; i<select.length; i++)
  34. {
  35. if(select[i].checked == false)
  36. {
  37. return false;
  38. }
  39. }
  40. return true;
  41. }
  42. </script>
  43. </html>

 效果如下

 

获取/修改样式属性

CSS中指定给元素的属性,可以通过JS来修改

行内样式操作 

element.style.[属性名] = [属性值]

element.style.cssText = [属性名+属性值]

行内样式,通过style直接在标签上指定的样式,优先级很高,适用于改的样式少的情况 

示例:
实现点击文字放大字体

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div style="font-size:10px;" onclick="ChangeSize()">哈哈哈</div>
  10. </body>
  11. <script>
  12. function ChangeSize(){
  13. let element = document.querySelector('div')
  14. let size = parseInt(element.style.fontSize) + 10;
  15. element.style.fontSize = size + 'px' //第一种写法
  16. //element.style.cssText = "font-size:" + size +"px" 第二种写法
  17. }
  18. </script>
  19. </html>

 PS:上述方法只能影响到特定样式,其他内联样式的值不变

类名样式操作

element.className = [CSS 类名]

修改元素的CSS类名,适用于要修改的样式有很多

代码示例:开启夜间模式 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .light{
  9. background-color: aliceblue;
  10. color: black;
  11. width: 100%;
  12. height: 100%;
  13. }
  14. body,html{
  15. width: 100%;
  16. height: 100%;
  17. }
  18. .dark {
  19. background-color: black;
  20. color: white;
  21. width: 100%;
  22. height: 100%;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="light" onclick="changeStyle()">
  28. 这是一段话<br>
  29. 这是一段话<br>
  30. 这是一段话<br>
  31. 这是一段话<br>
  32. 这是一段话<br>
  33. 这是一段话<br>
  34. 这是一段话<br>
  35. </div>
  36. </body>
  37. <script>
  38. function changeStyle(){
  39. let element = document.querySelector('div')
  40. //如果当前的样式是白天模式,将其切换到黑夜模式
  41. //否则就将当前样式切换到白天模式
  42. if(element.className == "light")
  43. {
  44. element.className = "dark"
  45. }
  46. else
  47. {
  48. element.className = "light"
  49. }
  50. }
  51. </script>
  52. </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节点的子节点,则该方法会抛出异常
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div class="container">
  10. <div>1</div>
  11. <div>2</div>
  12. <div>3</div>
  13. <div id="delete">4</div>
  14. </div>
  15. </body>
  16. </html>
  17. <script>
  18. let parent = document.querySelector(".container")
  19. let child = document.querySelector("#delete")
  20. //要通过父元素才能删除子元素
  21. parent.removeChild(child)
  22. </script>

效果如下 

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号