dom一些东西

2020-01-18 作者:网站首页   |   浏览(81)

时间: 2019-08-28阅读: 124标签: dom1.创建元素

文档对象模型 (DOM) 将 web 页连接到脚本或编程语言。通常这意味着 javascript, 但将 HTML、SVG 或 XML 文档建模为对象不是 javascript 语言的一部分。它给文档(结构树)提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问,以改变文档的结构,样式和内容。 DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说,它将 web 页面和脚本或编程语言连接起来了。

创建元素:document.createElement()

尽管通常会使用 JavaScript 来访问 DOM, 但它并不是 JavaScript 的一部分,它也可以被其他语言使用。

使用document.createElement()可以创建新元素。这个方法只接受一个参数,即要创建元素的标签名。这个标签名在HTML文档中不区分大小写,在XHTML中区分大小写。

DOM的基本类型

vardiv= document.createElement("div");

Node类型

Js中所有节点类型都继承自Node类型,因此所有节点都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性,用于表明节点类型。

Node.ELEMENT_NODE 1 一个 元素 节点,例如 <p> 和 <div>。
Node.TEXT_NODE 3 Element 或者 Attr 中实际的 文字
Node.PROCESSING_INSTRUCTION_NODE 7 一个用于XML文档的 ProcessingInstruction ,例如 <?xml-stylesheet ... ?> 声明。
Node.COMMENT_yzc216亚洲城,NODE 8 一个 Comment 节点。
Node.DOCUMENT_NODE 9 一个 Document 节点。
Node.DOCUMENT_TYPE_NODE 10 描述文档类型的 DocumentType 节点。例如 <!DOCTYPE html> 就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE 11 一个 DocumentFragment 节点

2.4.5.6.12已被弃用尽量不要使用。

使用createElement()方法创建新元素的同时,也为新元素设置了ownerDocument属性,可以操作元素的特性。

Document类型

js通过Document表示类型文档。在浏览器中document对象是HTMLDocument的一个实例,表示整个HTML页面。document是window中一个属性可以当作全局变量访问。
Document有下面的特性:
nodeType为9
nodeName为#document
nodeValue为null
parentNode为null
子节点可能是一个DocumentType或Element

div.id = "myDiv";div.className = "div1";

Element类型

Element类型用于表现HTML元素,提供对元素标签名、子节点及特性访问。
Element有下面几条特性:
nodeType为1
nodeName为元素标签名,tagName也是返回标签名
nodeValue为null
parentNode可能是Document或Element
子节点可能是Element,Text,Comment,Processing_Instruction,CDATASection或EntityReference

此时,新元素尚未被添加到文档树中,因此设置各种特性均不会影响浏览器的显示。要添加到文档树,可用appendChild()、insertBefore()、replaceChild()。(稍后讲到)

Text类型

文本节点用Text表示,包含的是可以照字面解释的纯文本内容。纯文本可以包含转义后的HTML字符,但不能包含HTML代码。
Text有下面的特性:
nodeType为3
nodeName为#text
nodeValue为文本内容
parentNode是一个Element
没有子节点

document.body.appendChild(div);

Comment

注释在DOM中通过Comment类型来表示的。
Comment节点具有以下特征:
nodeType为8
nodeName为#comment
nodeValue为注释的内容
parentNode可能是Document或Element
没有子节点

当把元素添加到文档树中后,伺候鬼这个元素做的任何修改都会实时地反应到浏览器中。

DocumentType类型

DocumentType包含着与文档doctype有关的信息。
nodeType值为10;
nodeName的值为doctype的名称;
nodeValue的值为null;
parentNode的值为null;
parentNode是Document;
没有子节点;

在IE中可以为createElement()方法传入完整的元素标签和属性。(只在IE中兼容)

DocumentFragment

在所有节点类型中,只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段(DocumentFragment)是一种轻量级的文档,可以包含和控制节点,但不会像完整文档那样占用额外资源。
可以将他当作仓库,在里面保存将来可能会添加到文档中的节点。
DocumentFragment有下面的特性:
nodeType为11
nodeName为#document-fragment
nodeValue为null
parentNode为null

var div = document.createElement("div id="mydiv" class="div1"/div");不能再标签里加其他元素节点或者文本节点,如下的方式和上面的得出的节点一样var div = document.createElement("div id="mydiv" class="div1"12212/div"); 

Attr类型

元素的特性DOM中以attr来表示。在IE8以上都可以访问Attr类型的构造函数和原型。从技术角度讲,Attr就是存在于元素的attributes属性中的节点。
开发人员最常使用的是getAttribute()/setAttribute()和removeAttribute()方法,很少直接引用特性节点。
Attr有下面的特性:
nodeType值为2
nodeName是特性的名称
nodeValue是特性的值
parentNode为null

yzc216亚洲城 1

image.png

创建文本节点 :document.createTextNode

一些API

使用document.createTextNode()来创建文本节点,这个方法接受一个参数:要插入节点的文本。与设置已有文本节点的值一样,作为参数的文本将按照HTML或XML的格式进行编码。

appendChild()

向父节点的末尾插入一个子节点,返回插入的节点(newChild)。

parent.appendChild(newChild);
document.createTextNode("121212");

insertBefore()

接受两个参数第一个为要插入的节点,第二个为参照节点。插入节点后,被插入的节点会变成参照节点之前的一个同胞节点,返回插入的节点(newChild)。

parent.insertBefore(newNode,someNode)

可以添加多个文本节点。假如两个文本节点时相邻的同胞节点,那么两个文本节点会连起来,中间不会有空格。

replaceChild()

接受两个参数,第一个为要插入的节点,第二个为要替换的节点。

parent.replaceChild(newNode,oldNode)

2.节点关系

removeChild()

接受一个参数,要移除的节点,返回移除的节点。

parent.removeChild(someNode)

(IE9以前不将换行和空格看做文本节点,其他浏览器会)

document.getElementById()

返回匹配指定id属性的元素节点。如果没有发现匹配的节点,则返回null。

文本关系如下:

document.getElementsByTagName()

法返回所有指定HTML标签的元素,返回值是一个类似数组的HTMLCollection对象。

div  div 2/div div 3/div div 4/div/div

document.getElementsByName()

该方法用于选择拥有name属性的HTML元素(比如<form>、<radio>、<img>、<frame>、<embed>和<object>等),返回一个类似数组的的对象(NodeList对象的实例),因为name属性相同的元素可能不止一个。

父节点:parentNode

document.getElementsByClassName()

方法返回一个类似数组的对象(HTMLCollection实例对象),包括了所有class名字符合指定条件的元素。

parentNode是指定节点的父节点.一个元素节点的父节点可能是一个元素(Element)节点,也可能是一个文档(Document)节点,或者是个文档碎片(DocumentFragment)节点.每一个节点都有一个parentNode属性。

document.querySelector()和document.querySelectorAll()

document.querySelector()接受一个CSS选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null。
document.querySelectorAll()返回所有匹配节点。
但是,它们不支持CSS伪元素的选择器(比如:first-line和:first-letter)和伪类的选择器(比如:link和:visited),即无法选中伪元素和伪类。

对于下面的节点类型:Attr, Document, DocumentFragment, Entity, Notation,其parentNode属性返回null。如果当前节点刚刚被建立,还没有被插入到DOM树中,则该节点的parentNode属性也返回null。

createElement()

document.createElement方法用来生成网页元素节点。
大小写不敏感,即参数为div或DIV返回的是同一种节点。

var newDiv = document.createElement('div');
script type="text/javascript" var child2 = document.getElementById("div2"); var parent = child2.parentNode;/script

createTextNode()

createTextNode方法用来生成文本节点,参数为所要生成的文本节点的内容。

var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);

子节点:childNodes

cloneNode()

cloneNode是用来返回调用方法的节点的一个副本,它接收一个bool参数,参数为true,表示parent的子节点也被复制,如果传入false,则表示只复制了parent节点。

(1)和createElement一样,cloneNode创建的节点只是游离有html文档外的节点,要调用appendChild方法才能添加到文档树中
(2)如果复制的元素有id,则其副本同样会包含该id,由于id具有唯一性,所以在复制节点后必须要修改其id
(3)调用接收的bool参数最好传入,如果不传入该参数,不同浏览器对其默认值的处理可能不同
如果是通过addEventListener或者比如onclick进行绑定事件,则副本节点不会绑定该事件
如果是内联方式绑定比如

<div onclick="showParent()"></div>

这样的话,副本节点同样会触发事件。

childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合(live collection)。即时更新就是对节点元素的任意修改都会立即反映到结果里。

createDocumentFragment()

该方法生成一个DocumentFragment对象。
DocumentFragment对象是一个存在于内存的DOM片段,但是不属于当前文档,常常用来生成较复杂的DOM结构,然后插入当前文档。这样做的好处在于,因为DocumentFragment不属于当前文档,对它的任何改动,都不会引发网页的重新渲染,比直接修改当前文档的DOM有更好的性能表现。

script type="text/javascript" var child2 = document.getElementById("div2"); var parent = child2.parentNode; var allChilds = parent.childNodes; console.log(allChilds.length) // IE下是3,其他浏览器是7 var nodeAdd = document.createElement("div"); var textAdd = document.createTextNode("这是添加的文本节点"); nodeAdd.appendChild(textAdd); parent.appendChild(nodeAdd); console.log(allChilds.length);// IE下是4,其他浏览器是8/script

createAttribute()

方法生成一个新的属性对象节点,并返回它。

attribute = document.createAttribute(name);

createAttribute方法的参数name,是属性的名称。

var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);

// 等同于

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");

兄弟节点:nextSibling,previousSibling

setAttribute()

该方法接受两个参数,要设置的特性名和值。

setAttribute(name,value)

如果特性名以存在则会替换特性名的值。

nextSibling返回某节点的下一个兄弟节点,previousSibling返回某节点的上一个兄弟节点,没有的话返回null。注意:可能因为元素换行的原因返回的是text节点。

getAttribute

该方法返回指定的特性名相应的特性值,如果不存在,则返回null或空字符串。用法如下:

var value = element.getAttribute("id");
script type="text/javascript" var child3 = document.getElementById("div3"); var next = child3.nextSibling; var previous = child3.previousSibling; console.log(next); // IE下返回div4,其他返回text console.log(previous) // IE下返回div2,其他返回text/script

第一个或最后一个子节点:firstChild、lastChild

firstChild返回node的子节点中的第一个节点的引用,没有返回nulllastChild返回node的子节点中的最后一个节点的引用,没有返回null

script type="text/javascript" var child3 = document.getElementById("div3"); var parent = child3.parentNode; var first = parent.firstChild; // IE是div2,其他是text var last = parent.lastChild; // IE是div4,其他是text/script

3.节点元素关系

只算元素,不算文本节点。

以下三个方法用法和节点关系完全一样,只是这三个方法只看元素节点,不管因为空格、换行造成的文本节点或者手动加上去的文本节点。children: 返回所有元素子节点(IE5 、ff3.5、opera3、chrome,但在IE8及以下会将注释节点看成一个元素节点)

以下两个IE9 才支持nextElementSibling:返回元素的下一个兄弟元素节点previousElementSibling: 返回元素的上一个兄弟元素节点

4.节点操作

appendChild()

appendChild()用于向childNodes列表的末尾添加一个节点,并且返回这个新增的节点。如果传入到appendChild()里的节点已经是文档的一部分了,那结果就是将节点从原来的位置转移到新位置,任何一个节点不能同时出现在文档中的多个位置。

 var returnNode = someNode.appendChild(someNode.firstChild); // 返回第一个节点 console.log(returnNode === someNode.firstChild); // false console.log(returnNode === someNode.lastChild); // true

insetBefore()

insetBefore()可以将节点插入到某个特定的位置。这个方法接受两个参数:要插入的节点和作为参照的节点。插入节点后,被插入的节点变成参照节点的前一个同胞节点,同时被方法返回。 如果参照节点是null,则与appendChild()执行相同的操作。

 // 插入后成为最后一个子节点 var returnNode = someNode.insetBefore(newNode, null); console.log(returnNode === someNode.lastChild); // true // 插入后成为第一个子节点 var returnNode = someNode.insetBefore(newNode, someNode.firstChild); console.log(returnNode === newNode); // true console.log(returnNode === someNode.firstChild); // true // 插入到最后一个子节点的前面 var returnNode = someNode.insetBefore(newNode, someNode.lastChild); console.log(returnNode === someNode.childNodes[someNode.childnodes.length - 2]) // true

替换节点:replaceChild()

replaceChild()接受两个参数:要插入的节点和要被替换的节点。被替换的节点将由这个方法返回并从文档中被移除,同时由要插入的节点占据其位置。

 // 替换第一个子节点 var returnNode = someNode.replaceChild(newNode, someNode.firstChild);

使用replaceChild()后,被替换的节点的所有关系指针都会被复制到插入的节点上面。

删除节点:removeChild()

该方法移除节点,接受一个参数,即要移除的节点,同时该方法返回被移除的节点。只能是一个节点,不能是一组节点。

 // 移除第一个子节点 var returnNode = someNode.removeChild(newNode, someNode.firstChild);

克隆节点:cloneNode(true/false)

返回调用该方法的节点的一个副本。参数表示是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身,文本或者换行、空格这些不会复制,因为他们都是一个textNode。

注意:在DOM4规范中(实现于Gecko 13.0(Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) , 查看 bug 698391),deep是一个可选参数. 如果省略的话,deep参数的默认值为true,也就是说,深度克隆是默认的.如果想使用浅克隆, 你需要将该参数指定为false。

在旧版本的浏览器中, 你始终需要指定deep参数。

克隆一个元素节点会拷贝它所有的属性以及属性值,当然也就包括了属性上绑定的事件(比如onclick="alert(1)"),但不会拷贝那些使用addEventListener()方法或者node.onclick = fn这种用JavaScript动态绑定的事件。

注意:为了防止一个文档中出现两个ID重复的元素,使用cloneNode()方法克隆的节点在需要时应该指定另外一个与原ID值不同的ID

 var div1 = document.getElementById("div1"); var cloneHtml = div1.cloneNode(true); document.body.appendChild(cloneHtml);

5.元素选择

HTML代码示例:

 div  p name="nameone"2/p div 3/div div name="div2"4/div /div

querySelector、querySelectorAll(IE8及以上)

Selectors API通过匹配一组选择器的方式来为从DOM中检索Element节点提供一些简单快捷的方法,这比过去必须要在javascript代码中用循环来查找某个你想要的特定元素更快一些。该规范对于使用Document,DocumentFragment和Element接口的对象都增了两种新方法:

querySelector

返回节点子树内与之相匹配的第一个Element节点。如果没有匹配的节点,则返回null。

querySelectorAll

返回一个包含节点子树内所有与之相匹配的Element节点列表,如果没有相匹配的,则返回一个空节点列表。注意:由querySelector()、querySelectorAll()返回的节点列表不是动态实时的(非live Collection)。这和其他DOM查询方法返回动态实时节点列表不一样。

选择器方法接受一个或多个用逗号分隔的选择器来确定需要被返回的元素。例如,要选择文档中所有CSS的类(class)是warning或者note的段落(p)元素,可以这样写:

var special = document.querySelectorAll( "p.warning, p.note" );

也可以通过ID来查询,例如:

var el = document.querySelector( "#main, #basic, #exclamation" );

执行上面的代码后,el就包含了文档中元素的ID是main,basic或exclamation的所有元素中的第一个元素。

querySelector() and querySelectorAll()里可以使用任何CSS选择器,他们都不是live Collection:

 var notLive = document.querySelectorAll("p"); console.log(notLive); document.getElementById("div1").removeChild(document.getElementById("div2")); console.log(notLive); // 上面两个输出都是输出 `p#div2.one`的引用,没有因为删除了`p`标签而使`notLive`的结果发生变化。

getElementById()

返回一个匹配特定ID的元素。id是大小写敏感的字符串,代表了所要查找的元素的唯一ID,如果没有则返回null。如果新建一个元素,还没有插入到文档中,则不能通过该方法获取到。

 var notLive = document.getElementById("div2"); console.log(notLive.innerHTML); document.getElementById("div1").removeChild(document.getElementById("div2")); console.log(notLive.innerHTML); // 上面输出都是2,说明getElementById()也是**非**live collection

getElementsByTagName()

document.getElementsByTagName()方法返回一个实时的包含具有给出标签名的元素们的HTMLCollection。指定的元素的子树会被搜索,包括元素自己。返回的list是实时的(live collection),意味着它会随着DOM树的变化自动更新。因此,如果对同一个元素,使用相同的参数,是不需要多次调用document.getElementsByTagName()的。

Element.getElementsByTagName()的搜索被限制为指定元素的后代而不是document

 var live = document.getElementsByTagName("p"); console.log(live[0].innerHTML); document.getElementById("div1").removeChild(document.getElementById("div2")); console.log(live[0].innerHTML); // 第一个输出2,第二个报错,因为无法引用到p标签

getElementsByName()

该方法返回一个实时的nodelist collection,包含文档中所有name属性匹配的标签。这是一个**live collection**。注意:在IE和opera下,如果某个元素1的name和另一个元素2的id重合,且元素2在元素1的前面,则getElementsByName()会取到元素2。

 var live = document.getElementsByName("div2"); console.log(live[0].innerHTML); document.getElementById("div1").removeChild(document.getElementById("div2")); console.log(live[0].innerHTML); // chrome下:全部输出4 // IE下: 第一个输出2,第二个报错。

getElementsByClassName()

该方法返回一个即时更新的(live)HTMLCollection,包含了所有拥有指定class的子元素。当在document对象上调用此方法时,会检索整个文档,包括根元素。(IE9以下不支持)

要匹配多个class,则className用空格分开。

getElementsByClassName("class1 class2");

 var live = document.getElementsByClassName("one"); console.log(live[0].innerHTML); document.getElementById("div1").removeChild(document.getElementById("div2")); console.log(live[0].innerHTML); // 第一个返回2,第二个报错

6.属性操作

setAttribute()

添加一个新属性(attribute)到元素上,或改变元素上已经存在的属性的值。

当在HTML文档中的HTML元素上调用setAttribute()方法时,该方法会将其属性名称(attribute name)参数小写化。

如果指定的属性已经存在,则其值变为传递的值。如果不存在,则创建指定的属性。也可指定为null。如果设置为null,最好使用removeAttribute()。

 var div2 = document.getElementById("div2"); div2.setAttribute("class", "new_class"); div2.setAttribute("id", "new_id");

注意:在IE7下,修改了元素的class,如果已有class,则会出现两个class,通过setAttribute()添加的不生效;如果没有class,则添加上class,但这个添加上去的class的样式不会生效。

removeAttribute()

该方法用于移除元素的属性。

 var div2 = document.getElementById("div2"); div2.removeAttribute("class");

注意:IE7下无法移除class属性

getAttribute()

该方法返回元素上指定属性(attribute)的值。如果指定的属性不存在,则返回null或""(空字符串)(IE5 都返回null)。

 var div2 = document.getElementById("div2"); var attr = div2.getAttribute("class"); console.log(attr);

注意:IE7下不能正确返回class,返回的是null,其他正常。

hasAttribute()

hasAttribute()返回一个布尔值,指示该元素是否包含有指定的属性(attribute)。

注意:IE7不支持该方法。

自定义属性data-*

html5里有一个data-*去设置获取元素的自定义属性值。

divdata-aa="11"

利用div1.dataset可以获得一个DOMStringMap,包含了元素的所有data-*。使用div1.dataset.aa就可以获取11的值。同样,通过设置div1.dataset.bb

"22"就可以设置一个自定义属性值。在不兼容的浏览器里,就使用getAttribute和setAttribute

 var div1 = document.getElementById("div1"); var a = null; if (div1.dataset) { a = div1.dataset.aa; div1.dataset.bb = "222"; } else { a = div1.getAttribute("data-aa"); div1.setAttribute("data-bb", "2222"); } console.log(a);

7.事件

addEventListener()

addEventListener()将指定的事件监听器注册到目标对象上,当目标对象触发制定的事件时,指定的回调函数就会触发。目标对象可以是 文档上的元素、document、 window或者XMLHttpRequest(比如onreadystatechange事件)。

IE8及以下不支持此方法且只有事件冒泡没有事件捕获。IE9开始支持此方法,也就有了事件捕获。

 var div1 = document.getElementById("div1"); div1.addEventListener("click", listener, false); function listener() { console.log(‘test‘); } var cloneHtml = div1.cloneNode(true); document.body.appendChild(cloneHtml);

第一个参数是事件名,第二个是回调函数,第三个参数为true表示捕获,false表示冒泡。

 var div1 = document.getElementById("div1"); div1.addEventListener("click", listener1, true/fasle); function listener1() { console.log(‘test1‘); } var div2 = document.getElementById("div2"); div2.addEventListener("click", listener2, true/fasle); function listener2() { console.log(‘test2‘); }

有一点要注意的是,当对某一个元素1既绑定了捕获事件,又绑定了冒泡事件时:当这个元素1并不是触发事件的那个元素2时,则触发顺序会按照先 捕获 后 冒泡 的顺序触发;当这个元素1就是最底层的触发事件的元素时,则这个元素没有捕获和冒泡的区别,谁先绑定就先触发谁。

 var div2 = document.getElementById("div2"); div2.addEventListener("click", listener2, true); function listener2() { console.log(‘test2‘); } div2.addEventListener("click", listener1, false); function listener1() { console.log(‘test1‘); } // 按绑定顺序执行,两个`addEventLister()`颠倒过来则执行顺序也变化 // 如果再对`div1`绑定一个捕获、一个冒泡,则会先触发捕获 再 触发冒泡,与绑定顺序无关

removeEventListener()

与addEventListener()绑定事件对应的就是移除已绑定的事件。第三个参数的布尔值代表解绑的是捕获事件还是冒泡事件。两个事件互不相关。

 var div2 = document.getElementById("div2"); div2.addEventListener("click", listener2, true); function listener2() { console.log(‘test2‘); } div2.removeEventListener("click", listener2, true);

注意:只能通过removeEventListener()解绑有名字的函数,对于绑定的匿名函数无法解除绑定。

 div2.addEventListener("click", function(){ console.log(‘test‘); console.log(this); }, true); div2.removeEventListener("click", function() { console.log("test"); }, true); div2.onclick = null; // 点击div2依然打印出test

注意:这里this指向触发事件的元素自身。

attachEvent()、detachEvent()

IE8及以下使用这两个方法绑定和解绑事件,当然,IE9 也支持这个事件。但这个方法绑定的事件默认为冒泡也只有冒泡。

 // 这里需要在事件前加 on div2.attachEvent("onclick", listener1); function listener1() { console.log(‘test‘); console.log(this); } div2.detachEvent("onclick", listener1);

和addEventListener()一样,也不能解绑匿名函数。注意:这里this指向window。

阻止默认事件和冒泡

标准事件和IE事件中的阻止默认事件和冒泡事件也有很大区别。

 var div2 = document.getElementById("div2"); if (div2.addEventListener) { div2.addEventListener("click", function(e) { e.preventDefault(); // 阻止默认事件 e.stopPropagation(); // 阻止冒泡 console.log(e.target.innerHTML); }, false); } else { div2.attachEvent("onclick", function() { var e = window.event; e.returnValue = false; // 阻止默认事件 e.cancelBubble = true; // 阻止冒泡 console.log(e.srcElement.innerHTML); }); }

IE8及以下的event是绑定在window上的。(我的IE11里,仿真到IE7、IE8也可以取到标准事件里的e对象,估计是升级到IE11的原因)。

自定义事件:createEvent()

createEvent()用于创建一个新的event,而后这个event必须调用它的init()方法进行初始化。最后就可以在目标元素上使用dispatchEvent()调用新创建的event事件了。

createEvent()的参数一般有:UIEvents、MouseEvents、MutationEvents、HTMLEvents、Event(s)等等,分别有对应的init()方法。HTMLEvents、Event(s)对应的都是initEvent()方法。

initEvent(type, bubbles, cancelable)

type表示自定义的事件类型,bubbles表示是否冒泡,cancelable表示是否阻止默认事件。

target.dispatchEvent(ev)

target就是要触发自定义事件的DOM元素

 var div1 = document.getElementById("div1"); div1.addEventListener("message", function(){ console.log(‘test‘); }, false); var div2 = document.getElementById("div2"); div2.addEventListener("message", function(e){ console.log(this); console.log(e); }, false); var ev = document.createEvent("Event"); ev.initEvent("message", false, true); // 起泡参数变为true,div1的事件就会触发 div2.dispatchEvent(ev);

8.获取元素相关计算后的值

getComputedStyle()、currentStyle()

当我们想获取元素计算后实际呈现在页面上的各个值,就用这两个方法。IE8及以下用currentStyle(),IE9 及其他标准浏览器用getComputedStyle()。

 var div2 = document.getElementById("div2"); var result = ""; if (window.getComputedStyle) { result = (window || document.defaultView).getComputedStyle(div2, null)[‘cssFloat‘]; } else { result = div2.currentStyle["styleFloat"]; } console.log(result); // document.defaultView返回document对象所关联的window

这两个方法在不同的浏览器里差距也很大。比如float属性:getComputedStyle:IE9以上需要用cssFloat,其他标准的用floatcurrentStyle:IE8及以下可用styleFloat或者float。

比如height属性:假如未设置height值,标准浏览器里能计算出高度值,而currentStyle计算出来是auto。

上面的例子getComputedStyle是用键值去访问的,也可用getPropertyValue()去访问。(IE8、IE7不支持)

result = (window||document.defaultView).getComputedStyle(div2,null).getPropertyValue("float");

getBoundingClientRect()、getClientRects()

getBoundingClientRect()该方法获得页面中某个元素的上、右、下、左分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离(到浏览器顶部而不是文档顶部)。该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height;这里的top、left和css中的理解很相似,width、height是元素自身的宽高,但是right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。

getClientRects()是返回一个ClientRectList集合。

 var div1 = document.getElementById("div1"); var rects1 = div1.getClientRects(); var rects2 = div1.getBoundingClientRect(); console.log(rects1[0].top); console.log(rects2.top);

本文由yzc216亚洲城发布于网站首页,转载请注明出处:dom一些东西

关键词: yzc216亚洲城