JS DOM模块知识点复习及面试题汇总

知识点

Dom Tree

网页中的一切内容在内存中都是以树的形式存在的，网页中的每一项内容都是树上的一个节点对象。包括：元素，文本，属性...

document: 树只有一个根结点，包含了所有网页内容

Node: 每个节点都是一个node类型的对象，node是所有节点的父类型 三大公共，nodeType, nodeName, nodeValue

查找API

• 不需要查找，可直接获取的元素

    html  docunment.documentElement
  head  document.head
  body document.body
  

• 按节点关系查找

   查找节点：
   elem.parentNode 查找elem的父节点
   elem.childNodes 找elem的所有直接子节点
   elem.firstChild 找elem的第一个直接子节点
   elem.lastChild 找elem的最后一个直接子节点
   elem.previousSibling 找elem的前一个兄弟
   elem.nextSibling 找elem的下一个兄弟
   查找元素：
   elem.parentElement 找父元素
   elem.children 找所有直接子元素
   elem.firstElementChild 第一个直接子元素
   elem.lastElementChild 最后一个直接子元素
   elem.previousElementSibling 前一个兄弟元素
   elem.nextElementSibling 下一个兄弟元素
  

• 按HTML查找

  按ID查找：
  document.getElementById('id')
  
  按标签名称查找:
  document.getElementsByTagName('p')
  
  按name属性查找
  document.getelementsByName('text')
  
  按class查找
  document.getElementsByClassName('userClass')
  

• 按选择器查找

  只查找一个元素:
  document.querySelector('selector')
  
  查找多个元素:
  document.querySelectorAll('selector)
  
  获取或设置HtmL
  elem.innerHTML(HTML片段)
  elem.textContent(纯文本内容)
  

修改API

• 修改标准属

  核心DOM：
  elem.getAttribute('src')  获取属性值
  elem.setAttribute('src', URL) 修改属性值
  elem.hasAttribute('src') 判断是否包含属性
  elem.removeAttribute('src') 移除属性
  HTML DOM:
  elem.src 获取属性值
  elem.src = URL 修改属性值
  elem.src === URL 判断是否包含属性
  elem.src = '' 移除属性
  注： 自定义属性用核心DOM操作， 三大状态(disabled,selected, checked)使用HTML DOM
  

• 修改css样式

   修改内联样式：
   elem.style.disabled = 'block' (属性名使用驼峰)
   elem = getComputedStyle(elem) 获取完整的样式对象style
  运行时修改样式：
   sheet = docunment.styleSheets[i] 获取样式表对象
   rule = sheet.cssRules[i] 获取样式表中的某个cssRule
   rule.style.disabled = 'block' 修改样式
  

• 添加和删除

  添加元素的三个步骤： 1.创建空元素 2.设置关键属性 3.追加到DOM

  追加的方法： parent.appendChild(child) 末尾追加 parent.insertBefore(child, oldChild) 中间插入 parent.replaceChild(child, oldChild) 替换

添加事件