前端JS之【DOM的基本操作】

 // 直接查找：查找器

    
  
    
     // id查找器：返回id为d1的标签
    
     document.getElementById('a1')
    
     document.querySelector('#d1')
    
  
    
     // 类查找器：返回所有className为c1的第一个元素或所有元素
    
     document.getElementsByClassName('c1')
    
     document.querySelector('.c1')
    
     document.querySelectorAll('.c1')
    
  
    
     // 标签查找器：返回标签为DIV的第一个元素或所有元素
    
     document.getElementsByTagName('div')
    
     document.querySelector('div')
    
     document.querySelectorAll('div')
    
  
    
 // 间接查找：通过节点父母兄弟儿子查询
    
  
    
     let divEle = document.querySelector('div')
    
  
    
     // 查找该元素的父节点：
    
     divEle.parentNode
    
  
    
     // 查找该标签的子标签（不包含子标签后代）：
    
     divEle.children
    
  
    
     // 查找该标签的子标签（包含子标签后代）：
    
     divEle.childNodes
    
  
    
     // 找第一个儿子：
    
     divEle.firstChild
    
  
    
     // 找最后的儿子:
    
     divEle.lastChild
    
  
    
     // 同级上一个节点：
    
     divEle.previousSibling
    
  
    
     // 同级下一个节点:
    
     divEle.nextSibling

 // 操作标签

    
  
    
     // 创建标签:这里是方法一，还可以通过修改innerHTML直接添加
    
     let imgEle = document.createElement('img')
    
  
    
     // 添加/更改标签属性
    
     // 添加默认属性(自带):
    
     imgEle.src = ''
    
     // 添加默认属性或自定义属性（创建）：
    
     imgEle.setAttribute('password','123')
    
     // 获取属性值：
    
     imgEle.getAttribute('src')
    
     // 移除某属性：
    
     imgEle.removeAttribute('password')
    
     
    
     // 添加内部文本innerText和innerHtml
    
     // 创建p标签 并添加文本
    
     let pEle = docuement.createElement('p')
    
     // 不识别html标签
    
     pEle.innerText = '<h1>hi</h1>'
    
     // 识别html标签
    
     pEle.innerHTML = '<h1>hi</h1>'
    
     
    
     // 操作类选择器，更改属性。(classList)
    
     let divEle1 = document.getElementById('d1')
    
     // 获取所有类属性，返回数组。
    
     divEle1.classList
    
     // 添加类属性
    
     divEle1.classList.add('new_class')
    
     // 移除类属性
    
     divEle.classList.remove('new_class')
    
     // 判定是否有该属性 返回 true/false
    
     divEle1.classList.contains('c1')
    
     // 有则删除 无则添加
    
     divEle1.classList.toggle('bg_red')
    
     
    
     // 操作标签样式，更改CSS。(style)
    
     let imgEle1 = document.getElementsByTagName('p')[0]
    
     // 更改图片 src属性
    
     imgEle1.style.src = ''
    
     // 更改图片 width属性
    
     imgEle1.style.width = ''
    
  
    
     // 获取值操作
    
     // 获取输入文本
    
     let inputEle = document.getElementsByTagName('input')
    
     // 获取输入值
    
     inputEle.value
    
     // 更改输入值
    
     inputEle.value = ''