DOM

dom树#

整个页面是document

页面里的元素叫element

网页中的所有内容叫节点，用node来表示

以上所有的内容都可以看成是对象

获取元素#

id获取#

<body><p id="one"></p></body><script>    let a=document.getElementById('one')//这样就获得了上面p标签对象了   </script>

如果没有就返回null

展现完整element#

console.dir(a)//就能看到完整的对象

标签获取#

<body><ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li></ul></body><script>    let a=document.getElementsByTagName('li')   //返回的是一个数组，代表里面的每一个元素    console.log(a)//[li, li, li, li, li]
</script>

当有多个标签，想要获取指定标签的时候可以把范围缩小到element

<body><ul id="one">    <li>1</li>    <li>2</li></ul><ul id="two">    <li>111</li>    <li>222</li></ul></body><script>    let a=document.getElementById('two')    let b=a.getElementsByTagName('li')    for (let i in b){        console.log(b[i])    }</script>

类名获取#

<body><p class="one"></p><p class="one"></p></body><script>   let a =document.getElementsByClassName('one') //和id一样也是返回的数组</script>

queryselect#

只能返回符合要求的第一个元素

<body><p class="one"></p>
<p id="one1"></p><li></li></body><script>  let a = document.querySelector('.one')  let b = document.querySelector('#one1')  let c =document.querySelector('li')</script>

queryselectAll#

就是选取所有符合的，返回一个数组

获取html,body#

html#

 let b=document.documentElement

body#

let a =document.body

事件#

三要素#

事件源事件类型处理程序

body><button id="btn1">1212</button></body><script>  let a =document.getElementById('btn1')//事件源  a.onclick=()=>{    //事件类型onclick,      alert('i am xiaoyu')//处理程序  }</script>

操作元素#

改变内容#

element.innerText:只修改文本，

element.innerHTML:包含html标签

<body><p id="pone"></p><button id="btn1">1212</button></body><script>  let a =document.getElementById('btn1')//事件源  let pb=document.querySelector('#pone')  a.onclick=()=>{     pb.innerText='xxiixixi'  }</script>

改变class#

<body><p id="pone"></p><button id="btn1">1212</button></body><script>  let a =document.getElementById('btn1')//事件源  let pb=document.querySelector('#pone')  a.onclick=()=>{     pb.innerText='xxiixixi'      pb.className='demo1 demo2'//.className可以改变元素的class属性，可以写多个，中间加空格
  }</script><style>.demo1{    color: red;}.demo2{    background-color: seagreen;}</style>

改变src#

<body>
<button id="btn1">pit1</button><button id="btn2">pit2</button><img id="img1" src="" alt="" width="300" height="300">
</body><script>  let a =document.getElementById('btn1')//事件源  let b =document.getElementById('btn2')//事件源  let img=document.querySelector('#img1')      a.onclick=()=>{      img.src='https://img0.baidu.com/it/u=103721101,4076571305&fm=26&fmt=auto&gp=0.jpg'      }                        //通过。src属性就可以操控了      b.onclick=()=>{      img.src='assets/img/1.jpg'      }
</script>

很多属性都是通过.属性名来完成

显示隐藏文本框内容#

<body><input type="text" value="haha">
</body><script>  let ainput=document.querySelector('input')  ainput.onfocus=function(){   //拥有焦点      this.value=''  }  ainput.onblur=function (){  //失去焦点      if(this.value===''){          this.value='haha'      }  }</script>

获取属性值#

<body><input type="text" value="haha">
</body><script>  let ainput=document.querySelector('input')  console.log(ainput.getAttribute('type'))</script>

用。getAttribute就可以获取属性值了

设置属性值#

<body><input type="text" value="haha">
</body><script>  let ainput=document.querySelector('input')  ainput.setAttribute('type','password')   //set  第一个参数属性名称，第2个是值  console.log(ainput.getAttribute('type'))</script>

移除属性值#

ainput.removeAttribute('value')

remove就可以了

自定义属性dataset#

统一按照data-xxx来写，可以分别是自定义，还是自带属性

H5新增dataset来管理自定义属性

<body><div></div>
</body><script>let a = document.querySelector('div')a.dataset.index='1'console.log(a)   //输出的结果<div data-index="1"></div></script>

dataset 是一个结合，可以输出看看，也可以单独输出其中一个来看

<body><div data-index="1" data-peo="xiaoyu"></div>
</body><script>let a = document.querySelector('div')console.log(a.dataset)  //结果：{index:"1",peo:"xiaoyu"}console.log(a.dataset.index)//j</script>