你的位置:首页 > 软件开发 > Java > 干货满满,绝不错过,DOM、BOM 操作超级集合

干货满满,绝不错过,DOM、BOM 操作超级集合

发布时间:2016-07-18 11:00:15
本章内容:定义节点类型节点关系 选择器样式操作方法style表格操作方法表单操作方法元素节点ELEMENT属性节点attributes文本节点TEXT文档节点 Document位置操作方法定时器弹出框location其它事件操作实例 定义文档对象模型(Document O ...

干货满满,绝不错过,DOM、BOM 操作超级集合

本章内容:

  • 定义
  • 节点类型
  • 节点关系
  •  选择器
  • 样式操作方法style
  • 表格操作方法
  • 表单操作方法
  • 元素节点ELEMENT
  • 属性节点attributes
  • 文本节点TEXT
  • 文档节点 Document
  • 位置操作方法
  • 定时器
  • 弹出框
  • location
  • 其它
  • 事件操作
  • 实例

 

定义

文档对象模型(Document Object Model,DOM)是一种用于HTML和

 

节点类型

 12中节点类型都有NodeType属性来表明节点类型

节点类型描述
1Element代表元素
2Attr代表属性
3Text代表元素或属性中的文本内容。
4CDATASection代表文档中的 CDATA 部分(不会由解析器解析的文本)。
5EntityReference代表实体引用。
6Entity代表实体。
7ProcessingInstruction代表处理指令。
8Comment代表注释。
9Document代表整个文档(DOM 树的根节点)。
10DocumentType向为文档定义的实体提供接口
11DocumentFragment代表轻量级的 Document 对象,能够容纳文档的某个部分
12Notation代表 DTD 中声明的符号。

 

节点关系

干货满满,绝不错过,DOM、BOM 操作超级集合

nodeType返回节点类型的数字值(1~12)
nodeName元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document
nodeValue文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null
parentNode父节点
parentElement父节点标签元素
childNodes所有子节点
children第一层子节点
firstChild第一个子节点,Node 对象形式
firstElementChild第一个子标签元素
lastChild最后一个子节点
lastElementChild最后一个子标签元素
previousSibling上一个兄弟节点
previousElementSibling上一个兄弟标签元素
nextSibling下一个兄弟节点
nextElementSibling下一个兄弟标签元素
childElementCount第一层子元素的个数(不包括文本节点和注释)
ownerDocument指向整个文档的文档节点
干货满满,绝不错过,DOM、BOM 操作超级集合干货满满,绝不错过,DOM、BOM 操作超级集合
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <div id="t">    <span></span>    <span id="s">      <a></a>      <h1>Nick</h1>    </span>    <p></p>  </div>  <script>    var tT = document.getElementById("t");    console.log(tT.nodeType,tT.nodeName,tT.nodeValue); //1 "DIV" null    console.log(tT.parentNode); //<body>...</body>    console.log(tT.childNodes); //[text, span, text, span#s, text, p, text]    console.log(tT.children); //[span, span#s, p, s: span#s]    var sT = document.getElementById("s");    console.log(sT.previousSibling); //#text, Node 对象形式    console.log(sT.previousElementSibling); //<span></span>    console.log(sT.nextSibling); //#text    console.log(sT.nextElementSibling); //<p></p>    console.log(sT.firstChild); //#text    console.log(sT.firstElementChild); //<a></a>    console.log(sT.lastChild); //#text    console.log(sT.lastElementChild); //<h1>Nick</h1>    console.log(tT.childElementCount); //3    console.log(tT.ownerDocument); //#document  </script></body></html>

原标题:干货满满,绝不错过,DOM、BOM 操作超级集合

关键词:dom

dom
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。