Comments (11)
DOM
Node类型
-
12种节点
- Node.ELEMENT_NODE(1);
- Node.ATTRIBUTE_NODE(2);
- Node.TEXT_NODE(3);
- Node.CDATA_SECTION_NODE(4);
- Node.ENTITY_REFERENCE_NODE(5);
- Node.ENTITY_NODE(6);
- Node.PROCESSING_INSTRUCTION_NODE(7);
- Node.COMMENT_NODE(8);
- Node.DOCUMENT_NODE(9);
- Node.DOCUMENT_TYPE_NODE(10);
- Node.DOCUMENT_FRAGMENT_NODE(11);
- Node.NOTATION_NODE(12)。
-
属性
- nodeName
- nodeValue
-
节点关系
- ownerDocument :指向文档节点;
-
操作节点
- 添加节点someNode.appendChild(newNode): 添加节点后,childNodes 的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。更新完成后,appendChild() 返回新增的节点
- 添加节点-returnedNode = someNode.insertBefore(newNode, referNode) : 返回插入节点
- 替换节点:var returnedNode = someNode.replaceChild(newNode, oldNode) : 在使用 replaceChild()插入一个节点时,该节点的所有关系指针都会从被它替换的节点复制过 来。尽管从技术上讲,被替换的节点仍然还在文档中,但它在文档中已经没有了自己的位置;
- 移除节点:someNode.removeChild(oldNode): 通过 removeChild()移除的节点仍然为文档所有,只不过在 文档中已经没有了自己的位置。
- 复制节点:myList.cloneNode(flag); flag 为true是深拷贝,false是浅拷贝;
- normalize(): 找到了 空文本节点,则删除它;如果找到相邻的文本节点,则将它们合并为一个文本节点
from shared.
Document 类型
- 表示文档, 在浏览器中, document 对象是HTMLDocument 的一个实例,表示整个 HTML 页面,并且是window 对象的一个属性。
- 文档 的子节点
- 其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或 Comment。
- documentElement : 取得html的引用;
- body
- doctype : 取得对<!DOCTYPE>的引用
- 文档信息
- title
- url
- domain : 页面的域名,可以设置,但是必须包含在 url中。
- referrer : 来源页面的url
- 查找元素
- getElementById()
- getElementsByTagName()
- getElementByName()
- forms
- images
- links
- nameItem
- DOM 一致性检测
- 一般配合能力检测
- var hasXmlDom = document.implementation.hasFeature("XML", "1.0"),两个参数一个是功能,一个是版本;
- 文档写入
- write(), writeln()
- open(),close() : 打开/挂关闭网页的输出流
from shared.
Element类型
- 属性
- id、title、lang、dir、className
- getAttribute/ setAttribute/removeAttribute: 获取和设置特性
- 创建
- createElement
from shared.
Text 类型
- appendData(text)
- deleteData(offset, count):从 offset 指定的位置开始删除 count 个字符。
- insertData(offset, text):在 offset 指定的位置插入 text。
- replaceData(offset, count, text):用 text 替换从 offset 指定的位置开始到 offset+count 为止处的文本。
- splitText(offset):从 offset 指定的位置将当前文本节点分成两个文本节点。
- substringData(offset, count):提取从 offset 指定的位置开始到 offset+count 为止
处的字符串。 - createTextNode("Hello world!");
from shared.
Comment类型
- 注释在 DOM 中是通过 Comment 类型来表示的。
- 创建文本: document.createComment("A comment ")
from shared.
DOM操作
动态脚本
function loadScriptString(code){
var script = document.createElement("script"); script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code)); } catch (ex){
script.text = code; }
document.body.appendChild(script); }
动态加载样式
function loadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0]; head.appendChild(link);
}
from shared.
DocumentFragment类型
- 就像react的fragment
var fragment = document.createDocumentFragment(); var ul = document.getElementById("myList");
var li = null;
for (var i=0; i < 3; i++){
li = document.createElement("li"); li.appendChild(document.createTextNode("Item " + (i+1))); fragment.appendChild(li);
} ul.appendChild(fragment);
from shared.
DOM的操作技术
动态添加脚本
function loadScriptString(code){
var script = document.createElement("script"); script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code)); } catch (ex){
script.text = code; }
document.body.appendChild(script); }
下面是调用这个函数的示例:
loadScriptString("function sayHi(){alert('hi');}");
动态样式
var style = document.createElement("style");
style.type = "text/css"; style.appendChild(document.createTextNode("body{background-color:red}")); var head = document.getElementsByTagName("head")[0]; head.appendChild(style);
操作表格
var table = document.createElement('table');
table.border = 1;
table.width = '100%';
var tbody = document.createElement('tbody');
table.appendChild(tbody);
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode('cell 1,1'));
document.body.appendChild(table);
nodeList
- 是动态的,每当文档结构发生变化,它们也会得到更新;
var divs = document.getElementsByTagName("div"), i,
len, div;
for (i=0, len=divs.length; i < len; i++){
div = document.createElement("div");
document.body.appendChild(div);
div.length 被存下来了,否则会无限循环
from shared.
DOM中的重点
一个浏览器是如何工作的
https://juejin.im/post/5de0e4dfe51d45359c14e1af
https://juejin.im/post/5de0e4dfe51d45359c14e1af
重排(回流)和重绘
https://xingorg1.github.io/xingorg1Note/webNote/js/performance-dom.html#_8%E3%80%81%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E4%BC%9A%E5%BC%95%E5%8F%91%E9%87%8D%E7%BB%98%EF%BC%9F
https://www.cnblogs.com/ziyoublog/p/9989797.html
from shared.
DOM 扩展
- 有些不懂???
Selectors API(www.w3.org/TR/selectors-api/)是由 W3C 发起制定的一个标准,致力于让浏览器原 生支持 CSS 查询。所有实现这一功能的 JavaScript 库都会写一个基础的 CSS 解析器,然后再使用已有的 DOM 方法查询文档并找到匹配的节点。尽管库开发人员在不知疲倦地改进这一过程的性能,但到头来 都只能通过运行 JavaScript 代码来完成查询操作。而把这个功能变成原生 API 之后,解析和树查询操作 可以在浏览器内部通过编译后的代码来完成,极大地改善了性能。
API
-
querySelector(param) : param 为一个css选择符,返回与该模式匹配的第一个元素或null;
-
querySelectorAll(param) : 返回一个Nodelist 集合,底层实现则类似于一组元素 的快照,而非不断对文档进行搜索的动态查询;
-
忽略文本节点和注释的属性
- childElementCount 返回子元素的个数
- firstElementChild 指向第一个子元素
- lastElementChild 指向最后一个子元素
- previousElementSibling 指向上一个同辈元素
- nextElementSibling 指向最后一个同辈元素
-
classList
- 返回一个class 的list集合
- 包含4个方法
- add(value) : 将给定字符串添加到列表中,如果有,则不添加;
- contains(value)
- remove(value)
- toggle(value) : 如果列表中存在指定的值,就删除;否则,添加
-
activeElement : 刚加载完成,指向 document.body 或者指向 已经获取焦点的元素
-
hasFocus() : 确定文档是否获取焦点;
-
readyState : 文档的加载状态
- loading : 正在加载文档
- complete : 已经加载完文档
-
compatMode : 兼容模式
- CSS1Compat : 标准模式
- BackCompat : 混杂模式
-
charset : 文档中实际使用的字符集
-
自定义数据属性
- 添加格式: "data-" 开头
- 获取:通过
dataset
获取 - 例子 :
<div data-set="test">1212</div> var test = div.dataset.test
;
-
插入标记
- innerHTML : 插入HTML 元素,不包含选中的元素
- outerHTML : 插入HTML 元素,包含选中的元素
- insertAdjacentHTML(pos , html) : 在指定位置插入元素;
- pos 包含四个值
- beforebegin : 在开始标记的前面
- afterbegin : 在开始标记的后面
- beforeend : 在结束标记的前面
- afterend : 在结束标记的后面
- pos 包含四个值
- 性能优化
- 手工删除要替换元素的所有事件处理程序;
- 减少操作的次数;
-
scrollIntoView(param)
- param 为true 则表示 调用元顶部与视口顶部尽可能的平齐;
- param 为false 则表示 调用元素全部显示在视口中;
-
contains
- 是否包含某个元素
document.documentElement.contains(document.body)
- 是否包含某个元素
-
插入文本
- innerText
- outerText
-
文档类型变化
- var doctype = document.implementation.createDocumentType("html", "-//W3C//DTD HTML 4.01//EN",
"http://www.w3.org/TR/html4/strict.dtd"); - var doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml", "html", doctype);
- var htmldoc = document.implementation.createHTMLDocument("New Doc");
- var doctype = document.implementation.createDocumentType("html", "-//W3C//DTD HTML 4.01//EN",
-
isSameNode : div1.isSameNode(div2) 两个节点引用同一个对象
-
isEqualNode : div1.isEqualNode(div2) : 两个节点有相同的类型(有相等的属性,而且attributes 和 childNodes 属性也相同 )
-
设置数据/获取数据 :
document.body.setUserData("name", "Nicholas", function(){});
要设置的键、实际的数据和处理函数;var value = document.body.getUserData("name");
-
访问样式
- style 定义的一些属性和方法
- cssText :访问style 特性中的代码;
- length : css的数量
- parentRule
- getPropertyCSSValue(propertyName) : 返回给定属性值的CSSValue
- getPropertyPriority(propertyName):如果给定的属性使用了!important 设置,则返回
"important";否则,返回空字符串; - getPropertyValue(propertyName):返回给定属性的字符串值;
- item(index):返回给定位置的 CSS 属性的名称;
- removeProperty(propertyName):从样式中删除给定属性。
- setProperty(propertyName,value,priority):将给定属性设置为相应的值,并加上优先
权标志("important"或者一个空字符串)。
- 获取计算样式,只能查看
- document.defaultView.getComputedStyle(node, null | 伪元素);
- myDiv.currentStyle
- style 定义的一些属性和方法
-
样式表
- 这些样式是从 或 <style> 中得到的
- disabled:表示样式表是否**被禁用((的布尔值。这个属性是可读/写的,将这个值设置为 true 可 以禁用样式表;
- href:如果样式表是通过包含的,则是样式表的 URL;否则,是 null。
- media:当前样式表支持的所有媒体类型的集合。
- ownerNode:指向拥有当前样式表的节点的指针,link 或者是 style;
- parentStyleSheet
- title: ownerNode 中 title 属性的值。
- type:表示样式表类型的字符串。对 CSS 样式表而言,这个字符串是"type/css"
- cssRules:样式表中包含的样式规则的集合
- ownerRule:如果样式表是通过@import 导入的,这个属性就是一个指针,指向表示导入的规
则;否则,值为 null。IE 不支持这个属性。 - deleteRule(index):删除 cssRules 集合中指定位置的规则。IE 不支持这个方法,但支持
一个类似的 removeRule()方法 - insertRule(rule,index):向 cssRules 集合中指定的位置插入 rule 字符串。IE 不支持这
个方法,但支持一个类似的 addRule()方法。 - 例子:
document.styleSheets
-
css 规则
- cssRules 对象
- cssText:返回整条规则对应的文本
- parentRule:如果当前规则是导入的规则,这个属性引用的就是导入规则;否则,这个值为 null。IE 不支持这个属性
- parentStyleSheet
- selectorText:返回当前规则的选择符文本
-style:一个 CSSStyleDeclaration 对象,可以通过它设置和取得规则中特定的样式值 - type:表示规则类型的常量值, 对于样式规则,这个值是 1。
- 创建规则: sheet.insertRule("body { background-color: silver }", pos);
- 删除规则: sheet.deleteRule(pos);
-
元素大小
- 滚动条
DOM遍历
- 两种形式
- NodeIterator:
- TreeWalker:
- 创建形式:
- document.createNodeIterator(root,whatToShow, filter,entityReferenceExpansion)
- document.createTreeWalker()
- 参数说明:
- root:想要作为搜索起点的树中的节点。
- whatToShow:表示要访问哪些节点的数字代码。
- filter:是一个 NodeFilter 对象,或者一个表示应该接受还是拒绝某种特定节点的函数。
- entityReferenceExpansion:布尔值,表示是否要扩展实体引用。这个参数在 HTML 页面
中没有用,因为其中的实体引用不能扩展。 - whatToShow:
- NodeFilter.SHOW_ALL:显示所有类型的节点。
- NodeFilter.SHOW_ELEMENT:显示元素节点。
- NodeFilter.SHOW_ATTRIBUTE:显示特性节点。由于 DOM 结构原因,实际上不能使用这个值。
- NodeFilter.SHOW_TEXT:显示文本节点。
- NodeFilter.SHOW_CDATA_SECTION:显示 CDATA 节点。对 HTML 页面没有用。
- NodeFilter.SHOW_ENTITY_REFERENCE:显示实体引用节点。对 HTML 页面没有用。
- NodeFilter.SHOW_ENTITYE:显示实体节点。对 HTML 页面没有用。
- NodeFilter.SHOW_PROCESSING_INSTRUCTION:显示处理指令节点。对 HTML 页面没有用。
- NodeFilter.SHOW_COMMENT:显示注释节点。
- NodeFilter.SHOW_DOCUMENT:显示文档节点。
- NodeFilter.SHOW_DOCUMENT_TYPE:显示文档类型节点。
- NodeFilter.SHOW_DOCUMENT_FRAGMENT:显示文档片段节点。对 HTML 页面没有用。
- NodeFilter.SHOW_NOTATION:显示符号节点。对 HTML 页面没有用。
- 方法
- nodeIterator 的方法:nextNode() 和 previousNode()
- treeNode 的方法有:
- parentNode()/ firstChild()/lastChild()/nextSiling()/previousSibling()
- 例子:
var div = document.getElementById("div1"); var filter = function(node){
return node.tagName.toLowerCase() == "li"? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
};
var walker= document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, filter, false);
var node = iterator.nextNode(); while (node !== null) {
alert(node.tagName);
}
范围
- 选择DOM 中的一块区域,不必考虑节点的界限;
- 检测浏览器是否支持:
var supportsRange = document.implementation.hasFeature("Range", "2.0"); var alsoSupportsRange = (typeof document.createRange == "function");
- 创建 range 对象
var range = document.createRange()
; - range 实例的属性
- startContainer : 选区中第一及节点的父节点;
- startOffset : 在startcontainer 中起点的偏移量
- endContainer: 选区中最后一个节点的父节点
- commonAncestorContainer:startContainer 和 endContainer 共同的祖先节点;
- range 实例的方法
- selectNode (node) : 包含node
- selectNodeContents(p1):p1的内容;
- setStartBefore(refNode):将范围的起点设置在 refNode 之前
- setStartAfter(refNode)
- setEndBefore(refNode)
- setEndAfter(refNode)
- setStart(node, offset) : 一个参 照节点和一个偏移量值
- setEnd(node, offset)
- 选中内容
<body>
<p id="p1"><b>Hello</b> world!</p>
</body>
var p1 = document.getElementById("p1"); helloNode = p1.firstChild.firstChild; worldNode = p1.lastChild;
var range = document.createRange(); range.setStart(helloNode, 2); range.setEnd(worldNode, 3);
-
删除选中内容
-
range.deleteContents()
-
extractContents() : 并返回移除的内容
-
在范围内容中插入dom
- insertNode(node)
-
折叠范围(合扇子)
-
多个范围确定边界
- compareBoundaryPoints(常量, range2):
- 常量如下:
- Range.START_TO_START:比较第一个范围和第二个范围的起点;
- Range.START_TO_END:比较第一个范围的起点和第二个范围的终点;
- Range.END_TO_END:比较第一个范围和第二个范围的终点;
- Range.END_TO_START: 比较第一个范围的终点和第一个范围的起点。
- 返回值
- -1:第一个范围在第二个范围之前
- 0 : 两个范围相等;
- 1: 第一个范围在第二个范围之后;
-
复制DOM范围
var newRange = range.cloneRange();
-
清理 DOM 范围
- detach() : 从文档中分离
- range = null : 接除引用
from shared.
后面的文章将迁移到个人博客 https://blog.csdn.net/tyutjavalily
from shared.
Related Issues (10)
- 读书笔记-javascript 高级程序设计 HOT 26
- javascript 高级程序设计 8-9 HOT 4
- 读书笔记-《深入浅出React和Redux》 HOT 4
- 技术分享-MobX
- flat 和 flatMap
- 读书笔记-《图解HTTP》
- 技术分享-HTTP扫盲
- 学习笔记-Dart基础语法 HOT 1
- javascript 高级程序设计 6-10 HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from shared.