BOM

Posted 2020-10-22 Grace-zyy

 

DOM

node类型（基本类型，以下其他类型的鼻祖）

　　1、nodeType

　　　　　　parentNode:父节点

　　　　　　childNodes:子节点(理解成一个数组)

　　　　　　 someNode.firstChild == someNode.childNodes[0];

　　　　　　 someNode.lastChild == someNode.childNodes[someNode.childNodes.length-1];

　　　　　　 previouSiblings和nextSibling：兄弟节点

　　　　　　 hasChildNodes()判断是否有子节点

　　　　　　 元素文本都算是节点

　　2、操作节点

　　　　　　插入

　　　　　　　　appendChild();向末尾插入,(标签的里面)

　　　　　　　　insertBefore();将节点插入到某个特定位置，第一个参数插入的节点，第二个参数参照节点

　　　　　　替换

　　　　　　　　replaceChild()：第一个参数：新节点，第二个参数是要替换的

　　　　　　移除

　　　　　　　　removeChild(node);节点参数

　　　　　　　　

　　　　　　复制

　　　　　　　　cloneNode();布尔参数，true是深复制

Document类型（对象）（获得，写入文档节点，location用法）

　　document对象是window对象的属性。

　　1、文档信息

　　　　　　documentElement属性（指向html元素）

　　　　　　body属性（body元素）

　　　　　　document.doctype;//取得<!DOCTYPE>的引用

　　　　　   document.title:获取或设置title的值

　　　　　　取：var title = document.title

　　　　　　改：document.title = “xxx”

　　2、网页信息

　　　　　　

　　　　　　　　document.location.href === document.URL

　　　　　　(在console打印时少用等号)

　　　　　　　　例：document.domain = "www.baidu.html",domain是可以设置的

　　　　　　获取前一个页面的url:document.referrer 　　　　　　

　　　　　　location对象的用法,以下新增

　　　　　　

　　  3、获取元素

　　　　　　getElementById();取得id

　　　　　　getElementsByTagName();取得标签名

　　　　　　getElementByName();根据name属性名返回元素，常用在单选按钮中

　　4、写入元素

　　　　　　write():字符串参数，直接原样输出到文档流中，在页面加载完成后执行会复写整个页面

　　　　　　writeIn();同上，但是在末尾会添加换行符　　

　　　　　　open(),close()打开或关闭网页的输出流

Element类型（创建标签名和属性特性的操作）

　　提供了对元素标签的名，子节点及特性的访问

　　1、访问标签名

　　　　　　元素.tagName;//"DIV"

　　　　　　元素.nodeName;//"DIV"

　　2、html

　　　　　　属性：id,className,title,lang,dir,这些属性都可以用来获取或修改属性值

　　　　　　　　var ele = document.getElementById("id");

　　　　　　获取：

　　　　　　　　alert(ele.id);

　　　　　　修改：

　　　　　　　　ele.id = "someOtherId";

　　3、取得元素特性

　　　　　　getAttribute(属性名);//ele.getAeeribute("id");//id//getAttribute("class")

　　　　　　　　特点：style特性，用getAttribute();访问获取到的是css文本，通过属性访问则会返回一个对象。

　　4、设置元素特性

　　　　　　setAttribute("设置的特姓名"，值);

　　　　　　　　ele.setAttribute("class","newClass");

　　　　　　　　另一种写法：ele.class = "newClass";//注意自定义的属性这样修改会报错

　　5、删除元素的特性

　　　　　　removeAttribute();会彻底删除元素特性

　　6、attributes属性

　　　　　　只有Element类型使用，动态的特性类型集合，包含NameNodeMap对象，有以下方法（不常用）

　　　　　　　  （nodeName:特性名称，nodeValue:特性的值）

　　　　　　　　getNamedItem(name);返回nodeName属性等于name的节点；

　　　　　　　　removeNamedItem(name);移除nodeName属性等于name的节点；返回的是被删除的节点

　　　　　　　　setNamedltem(node);向列表中添加节点

　　　　　　　　item(pos);返回位于数字pos处的节点

　　　　　　　　例：var id  = ele.attributes.getNamedItem("id").nodeValue;//获取元素的id特性

　　　　　　　　　　var id = ele.attributes["id"].nodeValute;//这里把attributes理解为对象

　　　　　　　　　　设置新值：

　　　　　　　　　　ele.attributes[”id“].nodeValue = "newid";

　　　　　　用这个属性来迭代属性的值，attributes.length,用for遍历（把元素属性封装到数组里）

　　7、创建新元素

　　　　　　document.createElement(标签名);

　　　　　　例：var div = document.createElement("div");

　　　　　　　　div.id = "newId"

　　　　　　只是创建了个新元素，但未把它添加到文档树里

　　8、将新元素添加到文档树里

　　　　　　document.body.appendchild(div);

text类型

　　纯文本内容，不能包含元素标签，没有子节点

　　访问

　　　　　　nodeValue属性和data属性

 

　　 创建

　　　　　　document.createTextNode();

　　

　　添加

　　　　　　appendData(text);将内容添加到节点末尾（标签里面）

　   插入

　　　　　　insertData(offset,text);在offset位置插入count

　　删除

　　　　　　deleteData(offset,count);从offert位置开始删除count个字符

　　替换

　　　　　　replaceData(offset,count,text);用text替换offset到count的文本

　　分割

　　　　　　splitText(offset);从offset开始将文本分为两个文本节点

　　　　　　返回从数字开始之后的文本，包含数字下的那个字符。原文本留下数字之前的文本。

　　获取

　　　　　　substringData(offset,count);提取从offset开始到count结尾的文本

　　length属性

　　　　　　nodeValue.length = data.length

　　合并文本节点，假设一个元素下有两个文本节点，用这个方法合并后只有一个

　　　　　　normalize();

Comment类型

　　注释相关，和text类型继承同一个基类

　　创建注释

　　　　　　document.createComment();

CDATASection类型

　　用在XML文档下，表示CDATA区域

DocumentType类型

　　包含文档有关doctype的有关信息

DocumentFragment类型

　　创建了文本片段，不会显示在文档流中，当作一个备用仓库使用

　　创建

　　　　　　document.createDocumentFragment();　

Attr类型

　　表示元素特性，特性也就是存在于attributes属性中的节点

　　  属性：name,value,specified:布尔值，区别指定的还是默认的

　　创建

　　　　　　document.createAttribute();

　　赋值

　　　　　　var attr = document.createAttribute("align");

　　　　　　attr.value = "left";

　　获取

　　　　　　ele.attributes["align"].value

　　　　　　ele.getAttributeNode("align").value;

　　　　　　ele.getAttribute("value");

　　添加

　　　　　　ele.setAttributeNode("align");

DOM操作技术

动态脚本

　   创建随时调用的脚本

　　　　

　　　　　　 用script元素的text属性来添加脚本内容

　　　　　　或者用appendChild()来添加（ie下会出错），执行起来有点像eval()方法

动态样式

　　创建外部样式

　　

　　创建内部样式（会实时执行）

　　

　　以上添加样式代码在ie下会出错，另一个方法：

　　　　style.styleSheet.cssText = "body{width:100px;}",

　　　　styleSheet是style元素的属性

操作表格

　　各种table属性。。。

使用NodeList

　　有点像NamedNodeMap和HTMLCollection

　　动态的dom流，可以用for,length属性迭代，每次访问都会查询一次文档，所以要减少直接对dom的操作。

总结：

　　　　　　1、node是最基本的节点类型，其他类型都继承自它。

　　　　　　2、document类型表示整个文档，跟节点，document是document类型的实例。

　　　　　　3、element节点表示文档的html和xml元素。

　　　　　　4、操作文本节点。

 

DOM拓展

选择符API

　　document类型新增

　　1、querySelector();接收一个css选择符

　　　　　　

　　2、querySelectorAll();接收一个css选择符

　　　　　　取得该选择符下的所有元素，返回一个NodeList

　　　　　　例：var p = document.querySelectorAll("p strong");//取得p元素下的所有strong元素

　　element类型新增

　　3、matchesSelector()；接收一个css选择符参数，判断元素是否是个css选择符的引用，返回true或者false。不常用

元素遍历（查找）

　　节点类型

　　　　　　childElementCount：返回子元素的个数，不包括文本节点和注释

　　　　　　filstElementChild：返回第一个子元素，firstChild的元素版

　　　　　　lastElementChild：返回最后一个子元素

　　　　　　previousElementChild：返回前一个同胞元素，previousSibling的元素版

　　　　　　nextElementChild：返回后一个同胞元素，nextSibling的元素版

HTML5

　　类相关

　　　　　　1、getElementsByClassName();

　　　　　　　　　　例：取得id为text下的所有类名为info的元素

　　　　　　　　　　document.getElementById("text").getElementsByClassName("info");

　　　　　　2、元素的classList属性，表示元素的类列表，同样这个属性是新集合DOMTokenList的实例，它有以下方法(兼容性较差)

　　　　　　　　　　添加类

　　　　　　　　　　　　add(value);

　　　　　　　　　　　　例：ele.classList.add("newClass")

　　　　　　　　　　判断是否存在类

　　　　　　　　　　　　contains(value);返回布尔值

　　　　　　　　　　删除

　　　　　　　　　　　　remove(value);

　　　　　　　　　　删除或给定，有则删除，无则添加

　　　　　　　　　　　　toggle(value);

　　焦点管理

　　　　　　1、document.activeElement：获得当前获得焦点的元素，文档加载完表示的是body,加载中是null

　　　　　　2、document.hasFocus()：检查文档是否获得焦点,用这个方法判断用户是否正在与页面交互　

　　HTMLDocument的变化

　　　　　　1、readyState属性

　　　　　　　　　　两个值：

　　　　　　　　　　　　loading正在加载的文档

　　　　　　　　　　　　complete已经加载完成的文档

　　　　　　　　　　if(document.readyState == complete){}等于onload事件

　　　　　　2、compatMode属性，区分页面渲染模式

　　　　　　　　　　两个值：

　　　　　　　　　　　　CSS1Compat：标准模式

　　　　　　　　　　　　BackCompat：混杂模式

　　　　　  3、document.head属性，兼容性差

　　字符集属性（编码相关）

　　　　　　1、document.charset = "UTF-8";修改charset的值

　　　　　　2、defaultCharset：表示浏览器默认的字符集是什么，兼容性差

　　自定义数据属性

　　　　　　为元素添加属性，但要data-为开头，

　　　　　　　　　　例：<div id="add" data-num = "123"></div>

　　　　　　dataset属性来获取或设置自定义属性

　　　　　　　　　　例：ele.dataset.num = "1234";//这个ele最好是id获取的元素，唯一的

　　插入标记

　　　　　　1、innerHTML属性：返回或调用元素的所有子节点（包括注释和文本）类似于jq的html()方法。

　　　　　　　　

　　　　　　　　　　不能单纯的直接插入script和style标签

　　　　　　2、outerHTML属性

　　　　　　　　　　可读：获取调用元素的所有子节点的html标签

　　　　　　　　　　修改：替换包括调用元素在内的所有内容

　　　　　　3、insertAdjacentHTML()方法

　　　　　　　　　　

　　　　　　4、scrollIntoView()方法：对所有html元素可用，滚动页面，让元素出现在视口中，兼容差

专有拓展

　　1、文档模式

　　2、children属性

　　　　　　表示元素子节点，等同于childNodes

　　3、contains()方法

　　　　　　检查某个元素是不是被调用元素（使用这个方法的祖先元素）的子元素。是，则返回对，接收一个元素参数。

　　4、插入文本

　　　　　　　innerText属性：会返回调用元素下的所有节点数里的文本内容（会拼接起来），修改的话也会全部复写可以添加html代码。如果要过滤掉html代码，在使用一遍innerText即可。在ie的兼容上可以使用textContent　

　　　　　　outerText属性：调用和innerText一样，但是修改会完全覆盖元素，包括调用的元素，也就等同于删除了调用元素，不建议使用。　

　　5、滚动

　　　　　　scrollIntoViewIfNeeded(alignCenter);

　　　　　　scrollByLines(lineCount);

　　　　　　scrollByPages(pageCount);

　　

DOM2和DOM3

　　这部分内容就是升级了dom的用法，增加了许多属性方法，加强了交互功能。

　　DOM变化

　　　　　　1、DocumentType类型，新增3个属性：

　　　　　　　　　　publicId,systemId,internalSubset,这三个都是有关文档类型声明的属性

　　　　　　2、视图模块新增defaultView属性，指向给定的窗口，是视图部分唯一新增的属性，ie不支持，但在ie下有个等价的属性parentWindow

 　　　　　　  3、创建新html文档document.implementation.createHTMLDocument("new doc");兼容很差

　　　　　 4、一些node类型的变化

　　　　　　　　　　比较节点的引用对象和类型返回布尔值：isSameNode()和isEqualNode()，参数是比较节点，可以使被调用的节点也可以是其他节点

　　　　　　　　　　setUserData(),将属性，值，函数绑定给某个节点，三个参数，属性，value，数据处理函数

　　　　　　　　　　　　　　例：document.body.serUserData("name","newBody",function(){})

　　　　　　　　　　getUserData(),获得设置的属性值

　　　　　　　　　　　　　　例：var data = document.body.getUserData("name")

　　　　　　5、框架的变化

　　样式　

　　　　　（style属性）针对行内

　　　　　　　　访问：

　　　　　　　　　　ele.style.backgroundImage//ele.style.color//ele.style.cssFloat！！

　　　　　　　　获取：alert(ele.style.color)

　　　　　　　　重写：cssText

　　　　　　　　　　ele.style.cssText = "color:red;font-size:10px";

　　　　　　　　遍历：length，item()

　　　　　　　　getPropertyValue(属性名)方法；返回属性值的字符串表示

　　　　　　　　　　ele.style.getPropertyValue("color")

　　　　　　　　删除

　　　　　　　　　　ele.style.removeProperty("border");

　　　　　　计算的样式(不管是行内还是外链等等)都是只读的用法

　　　　　　　　　　1、document.dafultView.getComputedStyle("要计算样式的元素"，“伪元素的字符串，例：after，没有就填null”)

　　　　　　　　　　

　　　　　　　　　　　　ie不支持，但是有个相同的属性：ele.currentStyle

　　　　　　　操作样式表（链入样式表和<style>插入的样式表）

　　　　　　　　　　　　1、文档中样式表的集合：document.styleSheets,有个length属性

　　　　　　　　　　　　　　getStyleSheet():返回某个样式表对象

　　　　　　　　　　　　2、css规则

　　　　　　　 元素大小（元素的属性，只读的）

　　　　　　　　　　　　offsetHeight,offsetWidth：元素的宽高，包括边框，水平滚动条

　　　　　　　　　　　　offsetLeft,offsetTop：元素的外边框到包含元素的内边框间的距离

　　　　　　　　　　

　　　　　　　　　　　　如果容器是body，那么getElementLeft()和offsetLeft是一样的

　　　　　　　客户区大小（只读的）

　　　　　　　　　　　　clientWidth属性：内容区宽度加内边距宽度

　　　　　　　　　　　　clientHeight属性：同上

　　　　　　　　　　

 

 

　　　　　　　　　　浏览器的视口大小：document.body.clientWidth。。。

　　　　　　滚动

　　　　　　　　　　scrollHeight：没有滚动条的情况下，元素内容的总高度，可以获取元素的实际高度

　　　　　　　　　　scrollWidth：同上

　　　　　　　　　　scrollLeft：被隐藏在内容区域左侧的像素数，设置这个属性可以改变元素的滚动位置

　　　　　　　　　　scrollTop：同上，scrollTop = 0;让元素滚回到顶部

　　　　　　　　

　　　　　　　确定元素的大小

　　　　　　　　getBoundingClientRect(),返回元素的一个矩形模型，有left,right,top,bottom四个属性，表示相对于视口的位置

　　遍历

　　　　dom2定义了两个用于顺序遍历dom结构的类型：NodeIterator和TreeWalker,IE不支持遍历dom

　　　　　　　　1、NodeIterator

　　　　　　　　　　创建该类型的实例：document.createNodeIterator()　四个参数

　　　　　　　　　　主要方法：nextNode()向前遍历，previousNode()向后遍历

　　　　　　　　2、TreeWalker

　　　　　　　　　　升级版遍历，多方向遍历，除了上述两个方法，还有：

　　　　　　　　　　　　parentNode();父节点，

　　　　　　　　　　　　firstChild();第一个子节点

　　　　　　　　　　　　lastChild();当前节点最后一个子节点；

　　　　　　　　　　　　nextSibling();当前节点的下一个同辈节点；

　　　　　　　　　　　　previousSibling();遍历到当前节点的上一个同辈节点

　　　　　　　　　　创建一个遍历实例：document.createTreeWalker();同样有四个参数

　　范围

　　　　选择文档中的一个区域

　　　　　创建dom范围：var range = document.createRange();

　　　　   每个范围是range类型的实例，有以下属性或方法　　　　

 

　　　　　　　　　　添加内容：

　　　　　　　　　　　　selectNode(),接收一个dom节点，用该节点内容来填充范围，会选择整个节点，包括子节点。

　　　　　　　　　　　　selectNodeContents(),只选择节点的子节点

　　　　　　　　　　实现复杂选择：

　　　　　　　　　　　　setStart()和setEnd()

　　　　　　操作dom范围里的内容

　　　　　　　　删除：1、deleteContents()

　　　　　　　　　　　2、extractContents();也是删除，但是它会返回范围的文档片段，可以用这个返回的添加到其他元素里

　　　　　　　　克隆：cloneContents,复制文档片段的一个副本

　　　　　　　　插入：insertNode();向范围选取的开始出插入一个节点

　　　　　　　　　　　surroundContents：环绕范围添加内容

　　　　　　　　折叠：collapse();一个参数，true折叠到开始位置，false折叠到结束位置

　　　　　　　　比较：compareBoundaryPoints();来确定某些范围是否有公共边界

　　　　　　　　复制：cloneRange();复制范围的一个副本

　　　　　　　　清理使用后的范围：detach();一旦清除就不能在使用了