这是我参与11月更文挑战的第9天,活动详情查看:2021最后一次更文挑战
前文提到DOM中有12种节点类型,今天我们来讲讲平时比较常用到的Document类型和Element类型。
Document类型
Document类型是JavaScript中表示文档节点的类型。在浏览器中它表示整个html页面,是window对象的属性,因此是一个全局对象。 前面说过document是整个文档的根节点,回想html文档的结构,它的子节点可以是文档类型、元素等。可以通过document.doctype获得对<!doctype>的引用,document.Element属性始终指向<html>元素,还有一个body属性,指向我们经常会用到的body元素,方便快速访问。还有以下承载了文档信息的几个属性:
- title:页面的标题
- URL:当前页面的完整URL
- domain:页面的域名,注意它一旦放松就不能再收紧。比如从p2p.wrox.com设置为wrox.com之后就不能再设置回去了。它也是用来解决跨域通信的一种方案。
- referrer:来源页面的URL (这次拿掘金的个人资料页试了一下,第一个referrer忘记双写r了hhh)
说完了document的属性,再来说说它的一些方法
- 定位元素
- getElementById("要获取元素的id"):返回该元素;
- getElementsByTagName("标签名"):返回一个是对应标签的类数组对象,如果要获得文档中所有元素,可以用document.getElementsByTagName("*");
- getElementsByName("name属性值"):返回一个name属性是对应值的类数组对象。 还有一些可以访问的特殊集合,如document.anchors,document.links,document.forms,document.images等。
-
文档写入 可以使用write(字符串)、writeln(字符串)方法在页面加载期间向页面中动态添加内容,区别在于后者会追加一个换行符。注意如果要写入的字符串含有script标签的话,要进行闭合标签进行转义("<\/script>")
-
创建元素 createElement("要创建元素的标签名")
Element类型
所有HTML元素都通过HTMLElement类型表示。继承于Element的HTMLElement在其基础上增加了一些属性,常见的有id、title、className等。还有以下一些方法:
- getAttribute("属性名称"):主要用于获得自定义属性值。
- setAttribute("属性名称","属性值"):设置属性。
- removeAttribute("要去掉的属性名"):移除属性。
今天就讲到这里,明天是DOM系列的最后一篇啦,我们来说说DOM的扩展与演进,以及做一下DOM操纵方法的小结。See you tomorrow!