DOM文档对象模型

DOM文档对象模型

• 概述
  
  • document object model
  • dom 提供了用程序动态控制 html 接口
  • DOM 描绘了一个层次化的节点树,运行开发人员添加、移除和修改页面的某一部分
• 节点
  
  • 加载 HTML 页面时, Web 浏览器生成一个树型结构,用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成,组成一个节点树
  • 节点种类:在 HTML DOM (文档对象模型)中,每个部分都是节点
    
    • 文档本身是文档节点
    • 所有 HTML 元素是元素节点
    • 所有 HTML 属性是属性节点
    • HTML 元素内的文本是文本节点
    • 注释是注释节点

• 获取节点
  
  • 操作 dom 必须等节点初始化完毕后,才能继续
    
    • 把 script 调用标签移到 html 末尾即可
    • 使用 onload 事件来处理 JS,等待 html 加载完毕再加载 onload 事件里的 JS
      
      • window.onload = function () { //预加载 html 后执行};
• 获取方式如下:
  
  • getElementById() 据 id 获取 dom 对象：按照 id 取值,如果重复,那么我们以第一个为准
  • getElementsByTagName() 根据标签名获取 dom 对象数组
  • getElementsByClassName() 根据样式名获取 dom 对象数组
  • getElementsByName() 根据名称获取 dom 对象数组,常用于多选获取值
    
    • href=”javascript:void(0)”:伪协议,表示不执行跳转,而执行指定的点击事件
    • var content = temp.innerHTML;:返回开始和结束标签之间的 HTML。
    • var content2 = temp.innerText;:获取普通的文本
• 新增节点
  
  • write() 把任意字符串插入到文档中：
  • createElement() 创建一个元素节点
  • createTextNode() 创建一个文件节点
  • appendChild() 向元素添加新的子节点,作为最后一个子节点
  • insertBefore(newItem,existingItem) 在指定的已有的子节点之前插入新节点
    
    • 第一个参数:被插入的元素，第二个参数:参考元素
    • 若没有参考元素,相当于在末尾添加元素
  • element.parentNode:表示获取 element 对象的父节点
  • nextSibling:某对象的下一个同胞
    
    • insertBefore(span,pro.nextSibling);表示在 pro 对象的下一个同胞前
• 修改节点
  
  • replaceChild(newnode,oldnode) 替换元素中的子节点,用新节点替换旧节点
  • cloneNode() 复制节点
    
    • 被克隆对象.cloneNode(true/false)
      
      • 参数为 true:深入克隆,包括标签和内容，参数为 false:只克隆标签,不可隆内容
• 删除节点
  
  • removeChild() 从元素中移除子节点

节点属性

• 属性
  
  • innerHTML，获取文本内容,元素节点使用,文本节点不能使用(使用 nodeValue)
  • innerText，获取文本内容,从起始位置到终止位置的内容, 但它去除 Html 标签
  • firstChild，获取当前元素节点的第一个子节点
  • lastChild，获取当前元素节点的最后一个子节点
  • nextSibling，获取当前节点的后一个同级节点
  • previousSibling，获取当前节点的前一个同级节点
• 操作属性
  
  • 通过获取元素对象来操作属性

var txt =document.getElementById("txt");txt.id、txt.value......

• 
  
  • 通过方法来操作属性
    
    • 获取:getAttribute()
    • 设置:setAttribute()
    • 删除:removeAttribute()
-