DOM基础学习

一、获取标签对象

1.通过标签id名获取

getElementById('id')

2.通过类名选择

getElementsByClassName()

类名不止一个，返回的所有标签存放在一个伪数组里面

ps:伪数组只能使用数组的一些简单的方法（下标查询、长度查询等）不能使用（push，sort之类的方法）

3.通过属性名获取

getElementsByName() （适用于设置了name属性的input输入框）

4.通过选择器进行选择

querySelector()    querySelectorAll

querySelector()   querySelectorAll()都是通过选择器进行选择，跟css进行标签渲染一样(标签选择器，类选择器，伪类选择器之类的)

querySelector()只获取第一个满足条件的元素

var divEle = document.querySelector('div')
//只获取第一个div


<div> div1 </div>
<div> div2 </div>
<div> div3 </div>
<div> div4 </div>
<script>
    var divEle = document.querySelector('div')
    console.log(divEle)
</script>

 

querySelectorAll()获取所有的满足条件的所有元素，返回一个伪数组

var divEle = document.querySelectorAll('div')
//获取所有的div

 

二、修改标签内容

1.innerHTML  

<div> div1 </div>
<script>
    var divEle = document.querySelector('div')
    divEle.innerHTML = '修改后的内容'
    console.log(divEle)
</script>

 

2.innerText 

与innerHTML效果一致，不过修改后的内容为纯文本形式，浏览器不会解析其中的html标签

<div>div1</div>

<script>
    var divEle = document.querySelector('div')
    divEle.innerText = '<input>'
    console.log(divEle)
</script>

 

3.value

适用于input标签的value属性设值

<input type="text" value="我没有开挂"  > 

<script>
    var inputEle = document.querySelector('input')
    inputEle.value = '我开挂了'
</script>

三、操作元素样式

元素对象.style.属性名

var h = inputEle.style.height    //获取


inputEle.style.height = '500px'  //修改

ps:该方法只对行内样式生效

window.getComputedStyle(对象).属性名

//获取所有经过浏览器渲染的样式

var getW = window.getComputedStyle(divEle).width
console.log(getW)

四、给标签添加类名

单个类名的设置(只能将 str  赋值给  class = '  '  如果原来有类名，将被覆盖  )

标签对象.className  = ' str  '

能够将类名当成一个集合，添加删除都只影响名字为str 的类名  不影响其他类名

标签对象.classList.add = ' str  '      添加

标签对象.classList.remove = ' str  '     删除

标签对象.classList.toggle  = ' str  '      如果有str类名就删除，没有就添加

五、操作标签内的属性

标签对象.getAttribute('属性名')           标签对象.setAttribute('属性名'  ,  '属性值')

获取标签属性

<img src=''  title=' 你打我呀'>

console.log(document.querySelector('img').getAttribute('title'))

自定义属性

//定义格式  
//方式一    data:属性名    index:属性值
imgEle.setAttribute('data','index')
console.log(imgEle.getAttribute('data'))    //获取属性

//方式二    data-name属性名   index:属性值
imgEle.setAttribute('data-name','index')
console.log(imgEle.dataset.name)            //获取属性

移除属性名

imgEle.removeAttribute('data')