document.nodeType; // 返回 9 ,其中document对象为文档节点Document的实例
document.nodeType === Node.DOCUMENT_NODE; // true
至于一共有哪些节点,每个节点对应的数字又是多少,这个可以问谷歌就知道了。反正常用的就是元素节点Element(对应数字为1)和文本节点Text(对应数字为3)
var wasteNode = document.getElementById("waste-node");
wasteNode.parentNode.removeClhid(wasteNode); // 先拿到父节点,再调用removeClild删除自己
这里先暂停一下,不知道大家注意到没有,以上的几个方法都是操作某个节点的子节点,也就是说,操作前必须找到父节点(通过parentNode来找)
三、Document类型
document.body body节点的引用
document.title 页面的title,可以修改,会改变浏览器标签上的名字
document.domain 取得域名,可以设置,但是通常只能设置为不包含子域名的情况,在一些子域名跨域情况下有效。
document对象还有一些集合,例如document.forms 可以返回所有的form表单。类型也是HTMLCollection。
然后重要的方法就是write和writeln,它们都是向页面写入东西,区别就是后者会多加入一个换行符。
四、Element类型
接下来讲讲最重要也是最常见的一个类型,Element类型。
我们日常所操作的都是Element类型(实质是HTMLElement,这里为了方便理解,就简单这么说),比如
document.getElementById("test")
返回的就是Element类型。我们日常所说的“DOM对象”,通常也就是指Element类型的对象。
的时候最好是调用下类似toLowerCase()这种方法再做比较。
className 类名
还有一个attributes属性,保存了元素的全部属性。
<input id="test" checked="checked">
那么这个元素的属性被包含在 input.attributes里面,比如你在html元素上看到的class、id或者你自己定义的data-test这种属性。
document.createElement()可以创建一个元素,比如:
document.createElement("div");
document.createElement("<div>test</div>");
document.getElementById("test").getElementsByTagName("div"); // 找到id为test元素下的所有div节点
这个类型很特殊,也是第三常见类型(第一第二分别就是Document和Element)。
appendData(); // 在text末尾加内容
deleteData(offset, count); // 从offset指定的位置开始删除count个字符
<ul>
<li></li>
<li></li>
</ul>
创建文本节点的方法是document.createTextNode
DocumentFragment这个节点是一个文档片段,偶尔会用到。
var fragment = document.createDocumentFragment();
进过上面讲的这么多节点类型,想必大家对DOM节点已经有了很深的了解,下面讲一讲DOM扩展的一些东西。
浏览器为了方便开发者,扩展了一些DOM功能。
B.contains(A); // true就代表是,false就代表不是
其中,*TEXT是返回文本内容 *HTML是返回html文本。
九、MORE
var parentWindow = document.defaultView || document.parentWindow;
var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
得到元素的偏移值就复杂了一点,有两个方法offsetTop/offsetLeft,但是这两个方法是指元素针对与它的offsetParent对象而言的,所以,如果你想得到元素距离视口的位置,那么还需要找到offsetParent,计算他们的offsetTop/offsetLeft,在找offsetParent的offsetParent,如此循环直到offsetParent为null。注意,这个计算的位置也不包括margin部分。
来自:哎呦大黄
链接:http://www.cnblogs.com/season-huang/p/4322451.html
|