热门关键字:
jquery > jquery教程 > jquery教程 > HTML DOM基础学习笔记

HTML DOM基础学习笔记

250
作者:管理员
发布时间:2021/4/7 16:59:48
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4369
  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 根节点




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐