DOM树 文档对象模型

Copy
119 阅读3分钟

DOM树 文档对象模型

定义了访问和操作html文档的标准方法,与网页进行交互

  • 将HTML元素解析成一个对象
  • 将HTML元素之间的关系解析称对象树,为DOM数结构

增

  • document.createElement() 创建元素节点
  • document.createTextNode() 创建文本节点
  • document.createAttribute() 创建一个属性节点
  • 节点对象.appendChild(节点对象) 在obj的子节点中,末尾插入节点
  • 节点对象.inserBefore(新元素,指定子元素对象) 在指定子元素前插入新节点
  • 节点对象.cloneNode(false/true) 克隆节点,false只复制当前节点,true深度拷贝当前节点以及子孙节点

删

  • 节点对象.removeChild(子节点对象) 删除节点

改

  • 节点对象.replaceChild(新对象,被替换子对象) 替换节点

查

  • document.getElementById() 返回指定 id 的第一个对象的引用
  • document.getElementsByName() 返回带有指定名称的对象集合
<div name='name1'> document.getElementsByName('name1')
  • document.getElementsByTagName() 返回带有指定标签名的对象集合
  • document.getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象
  • document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素
  • document.querySelectorAll() 是HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节
  • 节点对象.parentNode 获取父节点
  • 节点对象.firstChild 第一个子节点,空白符也为子节点,显示#text // firstElementChild不查询出空格#text
  • 节点对象.lastchild 最后一个子节点,空白符也为子节点,显示#text // lastElementChild不查询出空格#text
  • 节点对象.children 所有子节点, HTMLCollection数组集合格式 // childNodes(包括空白符,注释等)
  • 节点对象.nextSibiling 后一位兄弟 // nextElementSibling
  • 节点对象.previousSibiling 前一位兄弟 // previousElementSibling

属性

  • 节点对象.innerHTML 获取或设置html元素
  • 节点对象.innerText 获取或设置text文本
  • 节点对象.标签属性 获取或设置标签的属性值
  • 节点对象.style.属性=属性值 获取或设置style
节点对象.style.cssText="color:red;"
  • 节点对象.className 获取或设置class
  • 节点对象.id 获取或设置id
  • 节点对象.classList 返回元素的所有类名,DOMTokenList
classList.add('className') 为元素添加类名
classList.remove('className') 移除元素类名
classList.contains('className') 判断指定类名是否存在
classList.toggle(class, true|false) 

classList.toggle(class, true|false)
第一个参数如果在节点中存在则移除,不存在则添加,移除返回false,反之返回true
第二个参数为是否强制添加或移除,不管该类是否存在

方法

  • 节点对象.getAttribute("属性名") 获取属性
  • 节点对象.setAttribute("属性名","属性值") 设置属性

事件

节点上 动态注册事件

节点对象.onclick = function(){}

  • onclick 点击事件
  • onmouseenter 鼠标移动到元素上 (有子元素也只执行一次)
  • onmouseleave 鼠标移开元素
  • onmouseover 鼠标移动到元素上 (有子元素移动到也会执行,事件冒泡)
  • onmouseout 鼠标移开元素
  • onmousedown 鼠标按钮被按下
  • onmouseup 鼠标按钮被松开
  • onmousemove 鼠标被移动
  • ondblclick 鼠标双击时
  • oncontentmenu 鼠标右键打开上下菜单时

元素信息

  • clientHeight/Width/Left/Top 元素内部的高度/宽度/左边框/顶部边框 (不包括边框+外边距)

  • offsetHeigh/Width/Left/Topt 元素的高度/宽度/左边框/顶部边框 (包括内边距+边框,不包括margin)

  • offsetParent 当前对象的上级层对象

  • scrollTop 设置/获取 对象最顶端和窗口中可见内容最顶端之间的距离

  • scrollLeft

avatar
文章
阅读
粉丝