HTML DOM基础学习笔记

  1. DOM简介
 
  DOM 文档对象模型(Document Object Model)
 
  HTML DOM 可以用来获取、修改、添加或删除 HTML 元素
 
  DOM 将 HTML 文档表达为树结构:
 
  2.HTML DOM 节点
 
  所有事物都是节点,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。
 
  节点之间,存在父、子、兄弟。修改时会按照结点关系进行操作。比如想插入,得选择在谁之前插入,而这个谁又是谁的儿子。
 
  3.常见HTML DOM 方法
 
  主要是查找,修改,创建等
 
  常用属性
 
  innerHTML – 节点(元素)的文本值
 
  —-可用于获取或改变任意 HTML 元素
 
  parentNode – 节点(元素)的父节点
 
  childNodes – 节点(元素)的子节点
 
  attributes – 节点(元素)的属性节点
 
  nodeName 属性规定节点的名称
 
  nodeValue 属性规定节点的值。
 
  4.HTML DOM 访问
 
  访问 HTML 元素方法
 
  通过使用 getElementById() 方法:返回带有指定 ID 的元素;通过使用 getElementsByTagName() 方法:返回带有指定标签名的所有元素;通过标签名获取元素 返回的是一个html集合, 类数组 length属性代表这个类数组的长度 ,其他数组的方法都没有
 
  getElementsByTagName 方法不仅是document对象下的方法,在html元素上也可以调用通过使用 getElementsByClassName() 方法:返回带有相同类名的所有 HTML 元素,作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数,并循环各个元素来获取需要的那个元素。
 
  例子:
 
  5.HTML DOM – 修改
 
  可以改变 HTML 内容、改变 HTML 属性、创建新的 HTML 元素、删除已有的 HTML 元素、改变 CSS
 
  样式、改变事件(处理程序)。
 
  例:修改css .style.xxx=“xx”
 
  创建新的 HTML 元素时必须创建该元素(元素节点),然后把它追加到已有的元素上)。
 
  使用事件
 
  HTML DOM 在事件发生时执行代码。如:
 
  在元素上点击、加载页面、改变输入字段
 
  删除 HTML 元素时。必须用该元素的父元素
 
  替换 HTML DOM 中的元素,使用 replaceChild() 方法,语法为node.replaceChild(newnode,oldnode),
 
  HTML DOM使用节点关系在节点树中导航。
 
  用getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。length 属性定义节点列表中节点的数量。然后用 length 属性来循环节点列表。三个节点属性:parentNode、firstChild 以及 lastChild
 
  DOM 根节点

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61649.shtml

张贴在2