DOM总结

来源：互联网发布：阿里云 p7 待遇编辑：程序博客网时间：2024/06/06 00:08

ChildNode (remove,before,after,replaceWith试验性方法）
CustomEvent构造函数，自定义事件；
var obj=document.body;
obj.addEventListener(“cat”, function(e) { console.log(e.detail) });
var event = new CustomEvent(“cat”, {
detail: {
hazcheeseburger: true
}
});
obj.dispatchEvent(event);

在不兼容的IE下可以这样解决

(function () {  if ( typeof window.CustomEvent === "function" ) return false;  function CustomEvent ( event, params ) {    params = params || { bubbles: false, cancelable: false, detail: undefined };    var evt = document.createEvent( 'CustomEvent' );    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );    return evt;   }  CustomEvent.prototype = window.Event.prototype;  window.CustomEvent = CustomEvent;})();

MutationObserver，向开发者提供一种DOM改变的回调，它替代弃用的属性Mutation Events；

var target = document.getElementById('some-id');var observer = new MutationObserver(function(mutations) {  mutations.forEach(function(mutation) {    console.log(mutation.type);    console.log(mutation.target);    console.log(mutation.attributeName);    console.log(mutation.addedNodes);  });    });var config = { attributes: true, childList: true, characterData: true };observer.observe(target, config);target.setAttribute('class','mzz');var child=document.createElement('span');child.innerHTML='mxx';target.appendChild(child);

配置项option具有的初始值参见

其中mutations对象具有其他的属性参见

document

属性

activateElement
body
characterSet 文档的的编码；
compatMode 渲染模式；
currentScript 获取当前的脚本；
defaultView 返回document相关的window对象；
designMode 文档是否可以编辑；
dir 文档渲染的方向rtl或则ltr；
documentElement 文档的根元素
documentURI 文档的地址；
domain 文档的域；
embeds返回文档嵌入的对象；
forms 返回表单元素的一个数组；
fullscreenElement 当前全屏显示的元素；
fullscreenEnabled 全屏模式是否可用；对于iframe可以设置allowscreen;
head
iamges
lastModified;
lastStyleSheetSet 返回最后一次要是的修改；
links 返回中href属性的值的一个数组；
location ；
mozSyntheticDocument 文档是否是单一的图片，视频等；
onabort ；
pointerLockElement;
readyState:loading,interactive,complete;
onreadystatechange;
referrer;
scripts;
selectedStyleSheet;
title;
URL;read-only;
visibilityState;

方法

createAttribute()；
createComment()；
createDocumentFragment()；
createElement()；
createNodeIterator()；

var nodeIterator = document.createNodeIterator(    document.body,    NodeFilter.SHOW_ELEMENT,    function(node) {        return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;    });var pars = [];var currentNode;while (currentNode = nodeIterator.nextNode()) {  pars.push(currentNode);}

NodeFilter具有FILTER_ACCEPT，FILTER_REJECT，FILTER_SKIP三个属性；
6. createTextNode()；
7. createTreeWalker()；

treeWalker = document.createTreeWalker(root, whatToShow, filter, entityReferenceExpansion);

var treeWalker = document.createTreeWalker(  document.body,  NodeFilter.SHOW_ELEMENT,  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },  false);var nodeList = [];while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);

getElementsByClassName()；
getElementsById();
getElementsByTagName()；
importNode():copy外部节点

var iframe = document.getElementsByTagName("iframe")[0];var oldNode = iframe.contentWindow.document.getElementById("myNode");var newNode = document.importNode(oldNode, true);document.getElementById("container").appendChild(newNode);

querySelector();
querySelectorAll()

node

各个属性

baseURI
childNodes返回的节点包含非element类型的节点

书写换行与不换行会影响输出的值：

    <!doctype html>    <html>    <head>        <title></title>    </head>    <body>    <div id="mzz">    <p>mzz</p>    </div>    </body>    <script type="text/javascript">        console.log(document.getElementById('mzz').childNodes);    </script>    </html>

换行的结果返回一个数组，有三个node对象[text,p,text],因为中间插入换行;不换行只有一个结果[p];

firstChild;
lastChild;
nextSibling;
nodeName;

nodetype nodeName 1 tagname 3 ‘#text’ 7 The value of ProcessingInstruction.target 8 “#comment” 9 “#document” 10 The value of DocumentType.name 11 “#document-fragment”

nodeType:

Node.ELEMENT_NODE   1   An Element node such as <p> or <div>.Node.TEXT_NODE  3   The actual Text of Element or Attr.Node.PROCESSING_INSTRUCTION_NODE    7   A ProcessingInstruction of an XML document such as <?xml-stylesheet ... ?> declaration.Node.COMMENT_NODE   8   A Comment node.Node.DOCUMENT_NODE  9   A Document node.Node.DOCUMENT_TYPE_NODE 10  A DocumentType node e.g. <!DOCTYPE html> for HTML5 documents.Node.DOCUMENT_FRAGMENT_NODE 11  A DocumentFragment node.

nodeValue;

nodetype nodeName 1 null 3 content of the text node 7 The value of ProcessingInstruction.target 8 content of the comment 9 null 10 null 11 null

9. ownerDocument:节点的顶层文档对象；如果节点是document，则返回null；
10. parentElement:返回节点的父节点，节点类型总是Element；如果节点是document，则返回null；

console.log(document.getElementsByTagName('html')[0].parentElement);//null

parentNode:返回节点的父节点，节点类型总是Element,document,documentFragment；

console.log(document.getElementsByTagName('html')[0].parentNode);//#document

previousSibling:若是第一个节点，则返回null；
textContent:如果是document则返回null，返回的包含具有的换行，空格等，但不包含HTML标签；

方法

appendChild(child)：如果child存在则把存在的child移动到末尾；

<!doctype html><html><head>    <title></title></head><body><div id="mzz">    <p id="a">mzz</p>    <p id="b">zzq</p></div></body></html><script type="text/javascript">    console.log(document.getElementById('mzz').appendChild(document.getElementById('a')));</script>

会先显示zzq，在显示mzz

cloneNode(deep):deep为false，不复制孩子，包括text类型的节点，true，递归赋值所有孩子；节点的属性会被复制，事件直接在标签上（eg：onClick=”)则可以被复制，除此之外，在js中注册的事件不能被复制；

<!doctype html><html><head>    <title></title></head><body><div id="mzz">    <p name="a" onClick="alert('mzz')">mzz</p>    <p id="b">zzq</p></div><div id="zzq"></div></body></html><script type="text/javascript">    console.log(document.getElementById('mzz').cloneNode(true));    document.getElementsByName('a')[0].addEventListener('click',function(){        alert('mzz');    })    document.getElementById('zzq').insertBefore(document.getElementById('mzz').cloneNode(true),null);</script>

compareDocumentPosition():==(不懂怎么用）==
contains(node):子代是否包含node（子代包括所有）；
hasChildNodes()：子代是否包含node（子代包括所有）；
insertBefore(newchild,prechild):将newchild插入prechild之前；
isEqualNode(node):比较两个节点是否相等（属性子代等是都一样）；
isSameNode(node)：比较两个节点是否是同一个节点；//不太支持
normalize():标准化子树，去除里面的text nodes；==（待验证）==
removeChild():移除节点并返回这个节点。返回被删除的节点
replaceChild(newChild, oldChild):用newChild替换oldChild节点，返回被替换的节点
children():返回
firstElementChild ;
lastElementChild;

Event

属性

bubbles:判断事件是否冒泡；
cancelBubble：取消冒泡（stopPropagation（））；
cancelable；
currentTarget:注册的目标节点，而不是事件触发的节点元素。
defaultPrevented：是否调用preventdefault();
eventPhase：表示事件触发的目标元素属于DOM的层级（body 1，依次往下）;
returnValue(IE);
srcElement(IE);
target：事件触发的节点元素;
timeStamp;
type：事件类型;
isTrusted(自定义还是非自定义事件）

事件

initEvent（）；
preventdefault();
stopImmediatePropagation();
stopPropagation()

使用注意

取消冒泡：
1. return false 不能取消;
2. stopPropagation();cancelBubble=true(IE);
对于srcElement和target
1. srcElement在IE8及以下用，target不能用；
取消事件的默认行为
1. returnValue=false(IE);
2. preventDefault();

0 0