乐趣区

关于javascript:jsDOM基础

jiezi

DOM

  1. 基本概念
  2. 节点类型
  3. 节点款式
  4. 事件

1 基本概念

Document Object Model 文档对象模型
BOM：与浏览器交互的办法和接口
DOM：解决网页内容的办法和接口 – HTML 和 XML 的利用程序接口
window 是 BOM 的外围对象，window 上的 document 是 DOM 的外围

任何 HTML 或 XML 文档都能够用 DOM 示意为一个由节点形成的 层级构造
应用 HTML Tree Generator 扩大程序能够查看任意网页的 DOM 构造

  • Document

    • Element html

      • Element head

        • Element title

      • Element body

        • Text Hello World!

    document 为根节点类型为 Document
    根节点有一个惟一 子节点html，咱们称之为文档元素 documentElement，类型为 Element

    console.log(document);
console.log(document.documentElement);

    能够看到 document 返回的是残缺的文档，documentElement 只是 html 节点

2 节点类型

总共 12 种，这里仅局部介绍

  1. Node
  2. Document
  3. Element
  4. Text
  5. Comment
  6. CDATASection
  7. DocumentType
  8. DocumentFragment
  9. Attr

2.1 Node 类型

所有节点类型都继承 Node 类型，所以所有节点类型都共享雷同的根本属性与办法

console.dir(Document)
console.dir(Text);
console.dir(DocumentFragment);




其余节点类型都对 Node 类型进行了援用

2.1.1 Node 类型的属性

节点类型 动态属性

  1. Node.DOCUMENT_NODE：9
  2. Node.ELEMENT_NODE：1
  3. Node.TEXT_NODE：3
  4. Node.COMMENT_NODE：8
  5. Node.CDATA_TYPE_NODE：4
  6. Node.DOCUMENT_TYPE_NODE：10
  7. Node.DOCUMENT_FRAGMENT_NODE：11
  8. Node.ATTRIBUTE_NODE：2

节点信息

  • baseURL：节点相对基址，等价于 location.href
  • isConnected：是否与 DOM 树连贯
  • nodeName：以后节点名称

  • nodeValue：返回或 设置 以后节点的值

    默认状况下，文档节点返回 null，对于 text，comment，CDATA 返回 文本内容 ，对于 attribute 返回该属性的 属性值

  • nodeType：按上述对应关系返回节点类型的数值

    console.log(document.nodeType);//9
console.log(document.documentElement.nodeType);//1
  • ownerDocument：返回以后节点的顶层 document 对象

  • textContent：返回以后节点以及 所有 子节点的文本内容包含 script 标签这种页面内不可见的脚本

    document 与 DOCTYPE 类型返回null

节点关系

  • childNodes：返回子节点的类数组对象 NodeList，该对象会 及时更新
  • firstChild：第一个子节点
  • lastChild：最初一个子节点
  • previousSibling：前一个兄弟节点
  • nextSibling：后一个兄弟节点
  • parentNode：返回父节点
  • parentElement：返回父元素，nodeType 不为 1 时返回 null

2.1.2 Node 类型上的办法

操作节点

  • appendChild(child)：将一个节点附加到父节点的子节点列表的开端，若父节点 已存 在间接将该节点 挪动 至开端

  • insertBefore(newNode,referenceNode)：指定地位插入至某节点之前，若曾经存在则只 挪动 不增加

    const div = document.createElement('div')
div.textContent = '123'
const html = document.documentElement
html.insertBefore(div, html.childNodes[1])
console.log(document);

  • cloneNode(deep)：克隆一个节点正本，deep 为 true 时，子节点同时被克隆
  • replaceNode(newChild,oldChild)：替换以后节点的一个子节点，返回被替换的节点
  • removeChild(child)：删除以后节点的一个子节点，返回该节点
  • normalize()：节点 规范化，删除空文本节点，相邻文本节点合并

节点信息

  • hasChildNodes()：以后节点是否 有子节点
  • contains(otherNode)：节点参数是否是该节点的子节点，是否 蕴含
  • isEqualNode(otherNode)：两个节点是否相等

  • compareDocumentPosition(otherNode)：参数节点与该节点的地位关系

    返回值：1 – 不在同一文档，2 – 之前，4 – 之后，8 – 蕴含，16 – 被蕴含，32 - 待定。这些值会累加，当 otherNode 被蕴含时为 16+4=20

  • getRootNode(options)：返回上下文的根节点

命名空间

  • lookupNamespaceURI()：返回以后节点与指定命名空间前缀绑定的命名空间 URI，对动静指定的命名空间不起作用
  • lookupPrefix()：同上
  • isDefaultNamespace(URI)：是否为默认命名空间

2.2 Document 类型

浏览器中的 document 对象 是 HTMLDocument 的实例，HTMLDocument 又继承了 Document，document 能够应用 Document 类型上的属性与办法

2.2.1 Document 上的属性

  • body：获得对 <body></body> 的援用
  • doctype：获得对 <!doctype> 的援用
  • head：对 head 的援用

文档信息

  • title：读取或批改浏览器题目，不会批改 title 元素

  • cookie：返回一个应用分号分隔的 cookie 列表，可写入

    间断的赋值不会笼罩，而是相当于增加的操作，过期工夫增加 expires= 到期工夫

  • readyState：文档加载状态
  • lastModified：文档最初批改工夫
  • scripts：返回所有 script 元素
  • images：返回文档图片列表
  • links：返回文档中所有超链接列表
  • forms：返回所有便利元素
  • plugins：返回插件列表
  • activeElement：返回取得焦点的元素
  • charaterSet：返回以后文档的字符编码
  • compatMode：表明以后文档模式是怪异模式还是规范模式
  • designMode：on|off，管制文档是否可编辑

节点信息

  • children：相较于 childNodes，它不包含文本节点与正文
  • childElementCount：相当于 children.length
  • firstElementChild：第一个元素节点
  • lastElementChild：最初一个元素节点
  • previousElementSibling
  • nextElementSibling

2.2.2 Document 上的办法

与 Node 比照

  • adoptNode(externalNode)：从其余文档剪切一个节点导入以后文档

    可用于对 iframe 的操作

  • imporNode(externalNode,deep)：从其余文档拷贝一个节点导入以后文档，deep 是否拷贝子节点
  • append(…Node|DOMString)：相较于 appendChild，它反对多个参数并且能够传入字符串作为 Text 类型节点
  • prepend(…)：开始地位插入
  • replaceChildren(…)：将原文档汇合替换为一个新的文档汇合

文档写入

  • open()：关上一个文档
  • write(‘html’)：写入内容
  • write(‘html’)：写入内容并换行
  • close()：敞开文档

创立节点

  • createElement(tagName)：返回新建的元素
  • createElementNS(namespaceURI,qualifiedName)：返回指定命名空间 URI 和限定名称的元素
  • createTextNode(data)：返回一个文本节点
  • createComment(data)：返回一个正文节点
  • createCDATASection(data)：返回一个 CDATA 片段节点

  • createDocumentFragment()：返回一个空白文档片段

    DocumentFragments 是 DOM 节点但不是 DOM 树的一部分，文档片段存于 内存中 ，将子节点插入到文档片段是不会引起页面 回流，性能佳

  • createAttribute(name)：返回一个 Attr 节点，设置该节点的 value 属性可设置属性值

获取节点

  • getElementById(id)：指定 id 的节点
  • getElementsByClassName(class)：指定类名的节点NodeList
  • getElementsByName(name)：指定 name 的节点NodeList
  • getElementsByTagName(tag)：指定标签名
  • getElementsByTagName(namespace,tag)：指定命名空间下的标签汇合
  • querySelector(selectors)：返回指定一组 CSS 选择器匹配的第一个元素
  • querySelectorAll(selectors)：返回一个动态的 NodeList，采纳深度优先遍历

2.3 Element 类型

示意 XML 或 HTML 元素，对外暴露出拜访元素标签名、子节点和属性的能力

2.3.1 Element 上的属性

节点信息

  • attributes：返回该元素所有属性节点的实时汇合
  • id：节点属性
  • className：class 属性值
  • tagName：标签名 – 大写

元素尺寸

  • clientHeight/Width：content + padding
  • offsetHeight/Width：border + client
  • scrollHeight/Width：无滚动条时，元素内容大小，与 client 雷同，不计算边框

元素地位

  • clientLeft/Top：边框宽度
  • offsetLeft/Top：元素边框到 offsetParent 边框的间隔

  • scrollLeft/Top：滚动的间隔

    常对 documentElement 应用

元素内容

  • innerHTML：与 textContent 相比，它不能施展暗藏的文本，会触发回流，写入文本时 防止应用
  • outerHTML：innerHTML + 本元素，能够连同本人一块解决

2.3.2 Element 上的一些办法

操作节点

  • after(…nodes)：在其父元素子节点列表中插入节点
  • before(…nodes)
  • append(…nodes)
  • perpend(…nodes)
  • remove()：从所属 DOM 树中删除

获取属性

  • hasAttribute(name)：是否有某个属性
  • hasAttributeNS(namespace,name)：该元素是否蕴含指定的元素
  • getAttribute(name)：返回元素属性值
  • getAttributeNames()：返回元素属性名称的 数组
  • getAttributeNode(name)：返回指定元素的指定属性节点
  • getAttributeNodeNS(namespace,name)：通过命名空间 URI 和名称来获取属性节点

属性操作

  • setAttribute(name,value)：有则更新，无则增加
  • removeAttribute(name)：删除一个属性
  • setAttributeNode(attr)
  • removeAttributeNode(attrNode)

2.4 Text 类型

  • appendData(text)：尾部增加文本
  • deleteData(offset,count)：从地位 offset 开始删除 count 个字符
  • replaceData(offset,count,text)：用 text 替换从地位 offset 到 offset+count 的文本
  • insetData(offset,text)：从 offset 开始插入文本
  • splitText(offset)：在地位 offset 拆分为两个文本节点
  • substringData(offset,count)：提取从 offset 到 offset+count 的文本

3 元素款式

document.style.attr：读取与设置元素的款式

3.1 style 上的办法

  • getPropertyValue(name)：返回属性值
  • getPropertyPriority(name)：检测是否应用了 important
  • removeProperty(name)
  • setProperty(name,value,priority)

3.2 计算款式

  • getComputedStyle(elem,pseudoElt)：返回页面展现的元素最终的款式对象

  • currentStyle.attr：以后款式 IE

    在做静止解决时，会常常应用 offset，然而它不仅仅只有宽高，计算挪动时容易呈现反方向的 bug，计算款式能够解决这个问题

4 事件

DOM 事件流

  • 捕捉阶段：从根节点开始查找
  • 达到指标：寻找到指标元素的指标事件
  • 冒泡阶段：从指标元素向上传递
  1. 事件绑定
  2. DOM 事件对象
  3. 事件类型

4.1 事件绑定

const oBtn = document.getElementsByTagName('button')
function handle() {console.log('事件 1');
}
oBtn[0].addEventListener('click', handle)
oBtn[1].onclick = () => {console.log('事件 2');
    oBtn[0].removeEventListener('click', handle)
    console.log('解绑事件 1');
}

如果须要解绑，不能应用匿名函数

4.2 DOM 事件对象

event 对象是传给事件处理程序的惟一参数

event 的属性

  • bubbles：是否冒泡
  • cancelable：是否可勾销事件默认行为
  • currentTarget：以后元素
  • defaultPrevented：是否调用了对应的办法
  • eventPhase：事件处理的阶段 1 2 3
  • type：事件类型
  • target：事件指标

event 的办法

  • preventDefault()：阻止默认行为
  • stopPropagation() : 勾销所有后续事件捕捉或事件冒泡
  • stopImmediatePropagation()：勾销所有后续事件捕捉或事件冒泡，并阻止调用任何后续事件处理程序

this 始终指向 currentTarget，target 才是事件指标

4.3 事件类型

  • 用户界面事件
  • 焦点
  • 鼠标
  • 滚轮
  • 输出
  • 键盘
  • 合成：在某种 IME 输出字符时触发

事件处理程序

退出移动版