DOM 文档对象模型

JS运行到HTML文件中，由HTML文件提供了DOM的能力

比如：

添加一个div

删除一个li

修改一个ol

获取某一个标签的样式

修改某一个标签的样式

给某一个标签添加事件

给某一个标签添加属性

DOM的核心是document

document 是 JS 内置的一个对象, 内部提供了很多属性和方法, 帮我们便捷的操作页面标签

DOM: 1. 文档对象模型 2. 标签

DOM 获取标签



 语法1：
 document.querySelector('像写css选择器一样书写标签')
 返回值：符合条件的第一个标签
 
 语法2：document.querySelectoeAll('像写css选择器一样书写标签')
 返回值 ：返回一个符合条件的变迁组成的伪数组
 
 伪数组
 长得很像数组，也没有下标，也没有length，但是数组的方法，很多都没有


   // 获取到页面的div标签并存储在一个变量oDiv中，（变量名并不重要）
   
   var oDiv=document.querySelector('div')
   //console.log(oDiv)
   
   var oSpan =document.querySelector('span')
   //console.log(oSpan)
   
   var mySpan = document.querySelectorAll('.spanel')
        console.log(mySpan)
        // console.log(mySpan[0])

DOM获取样式

//获取样式
//元素/标签.style  能够拿到 行内 样式, 或者给添加一个行内样式
//getComputedStyle('要查询样式的标签').要查询的样式名
//能够获取到元素的样式 (行内和非行内都可以)
// 但是获取到的内容是只读的, 只允许查询, 不允许修改


  var oDiv = document.querySelector('div')
        var myDiv = document.querySelector('.box')

        // console.log(oDiv.style.width)
        // console.log(oDiv.style.height)
        // console.log(oDiv.style.background-color)   // color is not defined
        // console.log(oDiv.style.'background-color')   // 语法不支持
        // console.log(oDiv.style['background-color'])  // 能够获取 但是稍微有点麻烦
        // console.log(oDiv.style.backgroundColor) // 推荐写法
        
        
         // 因为元素的样式添加在了 类名, 也就是非行内的, 所以 style 获取不到
        // console.log(myDiv.style.width)
        // console.log(myDiv.style.height)

        // getComputedStyle('要查询样式的标签').要查询的样式名
        // console.log(getComputedStyle(myDiv).width)
        // console.log(getComputedStyle(myDiv).height)

// 非行内样式 和 行内样式, 都能正常获取, 但是获取到的值 不能被修改
        console.log(getComputedStyle(oDiv).width)

        // getComputedStyle(oDiv).width = '800px'

随机背景

 
  <button>点击按钮背景变色</button>
  <script>
   // 0. 获取标签
   var btn=document.querySelector('#btn')
   var body=document.querySelector('body')
   
    /**
         *  添加事件
         * 
         *      1. 声明一个数组, 数组内部存放各种各样的颜色
         *      2. 点击事件触发的时候, 随机从数组内拿到一个颜色
         *      3. 赋值给 body 的背景色
        */
      // 1. 声明一个数组, 数组内部存放各种各样的颜色   
       var arr = ['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#800080', '#ffa500']
       
       btn.onclick=function(){
       var num=Math.floor(Math.random()*arr.length)
       body.style.backgroundColor = arr[num]
        
}
  </script>

操作元素类名

元素/标签.className =>能够得到元素目前拥有的类名还可以给这个属性重新赋值，然后修改当前标签的类名

元素/标签.classList 返回值是一个伪数组数组内下表对应的是我们的每一个类名 value 属性对应的是我们完整类名的字符串

// 1. className
        // console.log(box.className)
        // box.className = 'box2'   // 当前方式 不管之前有多少类名, 全都重新覆盖掉
        // box.className = box.className + ' box2'
        // box.className += ' box2'    // 类名之间一定要加 空格
        // box.className = ''  // 相当于清空之前的所有类名

        // 2. classList
        // console.log(box.classList)

        box.classList.add('box2')   // 向这个标签上在追加一个类名, 原本的类名不受影响
        box.classList.remove('qwe') // 删除指定类名 
        box.classList.remove('asd')

DOM 操作元素属性


// 1.获取标签属性
console.log(box.getAttrbute('class'))
var res =box.getAttribute('qwe')
console.log(res)

//2.设置标签属性
box.setAttribute('my_qwe',这是通过JS添加的一个自定义属性')
box.setAttribute('class', 'qf001')
box.setAttribute('qwe', '通过 JS 将 qwe 的属性值 进行了一个修改')

  /**
         *  3. H5 新增自定义属性
         * 
         *      h5 自定义属性在书写的时候有一个 固定的开头就是 data-
         *          完整语法: data-属性名=属性值
         * 
         *      获取的语法:
         *          元素/标签.dataset.属性名(属性名不要带data-)
         * 
         *      注意点: 在设置的时候 不要采用驼峰, 全小写, 因为哪怕你大写了, 浏览器也会转换为 小写
        */
        // console.log(box.dataset.name)
        // console.log(box.dataset)
        
           box.dataset.newname = '通过 JS 新增的一个 h5 自定义属性'

密码框


//基础版
   <input type="password"></input>
   <button>点击显示/隐藏密码<button>
   
   var inp=document.querySelector('input')
   var btn =document.querySelecyt('button')
   
   btn.onclick=function(){
   if(inp.getAttribute('type')==='password){
   inp.setAttribute('type','text')
   }else{
   inp.setAttribute('type','password')
   }
   }
   
   //优化版
    <input type="password"></input>
   <button>点击显示/隐藏密码<button>
   
   var inp=document.querySelector('input')
   var btn =document.querySelecyt('button')
   
   btn.onclick=function(){
   inp.type=input.type==='password'?'type':'password'
   }

JS（DOM）