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

  全选/取消全选按钮

  1. 点击全选按钮，则选中所有选项
  2. 只要某个选项取消，则自动取消全选按钮的勾选状态

  
  
      
      
      Document
  
  
      选中全部
  
      选项1
  
      选项2
  
      选项3
  
  
  
      let all = document.querySelector('.all')
      let select = document.querySelectorAll('.select')
      // 点击全选按钮，则选中所有选项
      function SelectAll()
      {
          for(i = 0; i  
   
   
  element.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);

    • child为待删除节点
    • element为child的父节点
    • 返回值为该被删除节点
    • 被删除的节点只是从dom树中被删除了，但是仍然存在内存中，可以随时加入到dom树的其他位置
    • 如果上例中的child节点不是element节点的子节点，则该方法会抛出异常

      
      
          
          
          Document
      
      
          
              1
              2
              3
              4
          
      
      
      
          let parent = document.querySelector(".container")
          let child = document.querySelector("#delete")
          //要通过父元素才能删除子元素
          parent.removeChild(child)
      

      效果如下 

      

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。