JavaScript DOM

2019-08-18 本文已影响0人 Qingelin

DOM—— Document Object Model 文档对象模型

Documenta对象 —— XML文档（HTML标签）
Element对象 —— 除了html以外的其他标签
Element-Text —— 文本内容
Object —— 把文档变成对象

DOM

DOM API

1、Node

1.1、Node组成：

Node 是 Document(html) 对象、Element对象和Text文本对象以及其它不重要的对象的原型链的顶端。

    页面中的节点Node 通过各种对象的构造函数构造出对象，这就是DOM API,这就是DOM的主要功能。

2、三种DOM API

2.1、Node的接口：

1、属性：

childNodes,firstChild,children,innerText,lastChild,nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent ；
注意：【考】
1、 nextSibling //可能会获取到文本，不只是标签
2、innerText和textContent有细微差别
3、nodeType 不同的值

节点常量类型：

常量	值	描述
Node.ELEMENT_NODE	1	一个元素节点，例如<p>和<div>
Node.TEXT_NODE	3	Element或Atrr中实际文字
Node.CDATA_SECTION_NODE	4	一个 CDATASection
Node.PROCESSING_INSTRUCTION_NODE	7	一个用于XML文档的 ProcessingInstruction
Node.COMMENT_NODE	8	一个 Comment节点
Node.DOCUMENT_NODE	9	一个 Document节点
Node.DOCUMENT_TYPE_NODE	10	描述文档类型的DocumentType节点
Node.DOCUMENT_FRAGMENT_NODE	11	一个DocumentFragment节点

【记住 DocumentFragment 优化】
*DocumentFragment，文档片段接口，表示一个没有父级文件的最小文档对象。它被作为一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为 DocumentFragment 不是真实DOM树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

最常用的方法是使用文档片段作为参数（例如，任何 Node 接口类似 Node.appendChild 和 Node.insertBefore) 的方法），这种情况下被添加(append)或被插入(inserted)的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。

该接口在Web组件中也非常有用: 模板元素在其 HTMLTemplateElement.content 属性中包含了一个 DocumentFragment 。

可以使用document.createDocumentFragment(https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment "创建一个新的空白的文档片段( DocumentFragment)。") 方法或者构造函数来创建一个空的 DocumentFragment.

2、方法：（如果一个属性是函数，就称为方法，换言之，方法就是函数属性）

appendChild() //向节点的子节点列表末尾添加新的节点
cloneNode(true/false) //如果true,深拷贝,则节点本身及节点中所有的后代元素都会被递归地克隆，如果false只拷贝节点本身
contains()
hasChildNodes()
insertBefore()
isEqualNode() // 相等就返回true,不一定是同一个
isSameNode() //相当于 === 号，同一个
removeChild() //把子元素从页面中删掉之后它依然在内存中
replaceChild()
mormalize() //常规化

【总结】：以上这些API功能：增删改查节点

2.2、Document的接口：

1、属性：

anchors
body
characterSet //字符集编码
childElementCount
children
doctype
documentElement //html
domain
fullscreen
head
hidden
images
links
location
onxxxxxxxxx //一系列事件监听
origin
plugins //插件
readyState //下载状态
referrer //引荐者
scripts
scrollingElements
styleSheets
title
visibilityState

2、方法：

close
createDocumentFragment()
createElement()
createTextNode()
execCommand() //执行命令
exitFullscreen()
getElementByBody()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getSelection()
hasFocus()
open()
querySelector()
querySelectorAll()
registerElement
write()
writeIn() //写一行
注意：【考】
1、querySelector() //返回一个元素
2、querySlectorAll() //返回多个元素组成的数组，即使只有一个元素还是会返回伪数组，还可以选择其中某一个例如：querySlectorAll[5]

2.3、Element的接口：

属性：

Atrributes //获取一个元素的所有属性
classList
className
cliemtWidth/Height/Top/
id
innerHtml //会把用户写的标签执行；但是innerText不会执行，只当作文本传到页面
tagName
scorllHeight
getAttribute
querySelector
querySelectorAll
removeAttribute
remove
setAttribute

DOM 细微区别总结：

DOM 有自己的国际标准，目前的通用版本是
DOM的最小组成单位叫做节点Node
节点常量类型有7种
DOM 树的根节点是html
<div id=x></div>中 x的值为这个 id 为 x 的 div 对应的 Element 对象
<div id=parent></div> 中parent的值为如果有父窗口，就是父窗口。如果没有，就是当前窗口。
【重点：全局变量可耻】

* 以上这两个不同原因：前者是最直观的，没有歧义，而后者parent是window全局属性，所以会返回父级对象。这就是全局变量可耻，不能用，用了之后要么被全局变量覆盖，要么覆盖全局变量，避开这个方法：
              1. 不用全局属性，使用局部属性，即写在函数作用域内：
                function x(){
                      var parent = document.querySelector('#self')
                }
            * 方法 1 扩展 知识点：
              不用全局属性，使用局部属性,立即调用函数：
              就是：声明一个匿名函数，并立即调用这个函数
              function (){
                  var parent = document.querySelector('#self')
                }.call()   
             * 立即调用函数的浏览器端bug:声明一个匿名函数，并立即调用这个函数后浏览器会报错，破解这个bug的方法：
              （1）. 把整个立即调用函数用圆括号括起来
              （2）. 把整个匿名函数用圆括号括起来。再立即调用
              （3）. 在整个立即调用函数前面写一个 【减号】 或 【加号】或 【感叹号】或 【波浪号】  （不需要用到真是值的情况下，只要让浏览器知道不是一个声明，而是一个立即调用函数就可以，其中 ！是取反；~ 是二进制取反）
              （4）. 不用关键字var ,而是用let关键字，然后把整个代码块放到花括号里面，原因：var会变量提升到花括号外面，而let不会，所以这样做只能把变量使用在花括号里，因此，用let 有利有弊
              2. 非要使用全局属性，就写成下面这样：
                   html骨架：
                  <div id = 'self'></div>
                   js:
                  var selfDiv = document.querySelector('#self')
                接着就可以正常使用这个变量名了

<div id=parent1><div id=child1></div></div> 中parent1.childNodes 的值是 {0:child1, length:1} 伪数组
【代码执行顺序有关题目：】
第一题：
var parent = document.getElementById('parent');
parent.childNodes.length 为 2
parent.appendChild(document.createElement('div'));
parent.childNodes.length // 请问现在 length 是多少
//3
//原因：修改之后再次运行了parent就是再次取值了，所以会变

第二题：
var allDiv = document.querySelectorAll('div')
allDiv.length // 假设是 2
document.body.appendChild( document.createElement('div') )
allDiv.length // 请问现在 length 的值是多少？？？
//2
//原因：值是之前保存在内存中的length,修改之后没有再次取值

* HTMLCollection与NodeList的区别有
   * HTMLCollection实例对象的成员只能是Element节点，NodeList实例对象的成员可以包含其他节点
   * HTMLCollection实例对象可以用id属性或name属性引用节点元素，NodeList只能使用数字索引引用。
* ChildNode接口用于处理子节点（包含但不限于Element子节点）。Element节点、DocumentType节点和CharacterData接口，部署了ChildNode接口。凡是这三类节点（接口），都可以使用哪些方法：
回答：remove()/before()/after()/replaceWith()

JavaScript DOM

DOM—— Document Object Model 文档对象模型

DOM API

1、Node

1.1、Node组成：

2、三种DOM API

2.1、Node的接口：

1、属性：

2、方法：（如果一个属性是函数，就称为方法，换言之，方法就是函数属性）

2.2、Document的接口：

1、属性：

2、方法：

2.3、Element的接口：

属性：

DOM 细微区别总结：

猜你喜欢

热点阅读