首页 > 代码库 > document
document
document对象为文档节点,位于所有节点的顶端
nodeType为9
nodeName为“#document”
nodeValue为null
没有父节点
子节点有元素节点,注释节点,DOCTYPE节点等等
最常用的是元素节点,document的子节点只有一个元素节点,就是html节点
document的一些常用属性和方法:
属性:
document.documentElement:直接获得一个html文档的<html>标签
document.title:获取<title>标签,可以获得内容和修改内容,document.title直接对应页面选项卡上的文字
document.body:获得<body>标签
document.head:获取<head>标签
document.URL:获取页面整个的URL地址
document.domain:获取页面的域名
document.referrer:获取跳转到当前页面的URL地址
document.readyState;返回loading(页面正在加载)或者complete(页面加载完毕)
document.charset:可以得到页面的编码方法,同时也可以对其赋值,改变页面的编码方式
例:当前页面的地址为http://www.baidu.com/a/index.html,上一个页面的地址为http://www.souhu.com/a/index.htm,在baidu是从souhu跳转过来的
所以document.URL为http://www.baidu.com/a/index.html,
所以document.domain为www.baidu.com,
所以document.referrer为http://www.souhu.com/a/index.html。
其中可以对document.domain进行修改,其他两个不可以修改,document.domain可以修改为baidu.com,将其改成松散的域名,但是只能这样改,
不可以改成其他页面的域名。
document.domain的作用:有两个页面,一个域名为p2p.baidu.com 另一个为www.baidu.com,二者之间的js是不可以进行互相取值的,但是如果将两个js文件
的document.domain都改为baidu.com,二者之间就可以互相访问彼此的js对象了。
注:只要讲document.domain改为松散的以后,就不可以再改为紧绷的了,如果document.domain改为了baidu.com就不可以再改为www.baidu.com了。
方法:
getElementById:
document.getElementById("某个id名") 获取该id所对应的标签,如果有多个id,只取第一个,这个方法一般只用document调用
getElementsByTagName
document.getElementsByTagName("某个标签的名") 如果是用document调用这个方法,则获取的是所有这个标签名的元素,返回一个HTMLCollection对象
相当于一个NodeList对象。
getElementsByTagName也可以在某个元素上调用,例如,现在获取了一个元素element
element.getElementsByTagName("div")就是在element这个元素的所有后代元素中进行搜索。
var a=document.getElementsByTagName("div")
var a=document.getElementsByTagName("div")
a.length:获取所获得的元素的个数
a[i]/a.item(i):获取第i 个元素
getElementsByClassName
这个方法同样可以在元素上调用,也可以用document调用,返回一个NodeList类型,存储的为具有该类名的标签
在元素上调用的时候是获得该元素的后代中具有这个类名的元素
var a=document.getElementsByClassName("aaa")
a.length:获取所获得的元素的个数
a[i]/a.item(i):获取第i 个元素
同时可以搜索具有几个类的元素
例如document.getElementsByClassName("aaa bbb ccc")
getElementsByName
该方法会返回name为某个具体值的元素,为HTMLCollection类型,相当于一个NodeList类型
只能用document调用
var a=document.getElementsByName("aaa")
a.length:name为aaa的元素个数
a[i]/a.item(i):第i 个元素
querySelector
这个方法可以有document,html中的各种元素,和documentFragment调用,其中documentFragment是DOM中的一个节点,有文章作专门介绍
document在全局查找,在元素上调用会在元素的后代中查找,在documentFragment上调用,会在documentFragment的内容中进行查找
传入的参数可以是任何的CSS选择器
例如
document.querySelector(".abc") 查找类名为abc的元素
document.querySelector("p a")查找所有是p标签的后代的a元素
这个方法只返回查找到的第一个元素
querySelectorAll
与querySelector一样,但是会找到所有的元素,返回NodeList类型
有item() [] length属性
以上所有的方法获得到的元素都有一个classList属性
classList属性中有add,remove,traggle,contains,item方法,有length属性
a[0].classList.add("某个类名"):可以在该标签中加入这个类
a[0].classList.remove("某个类名"):可以在该标签中加入这个类
a[0].classList.toggle("某个类名"):可以判断标签中是否有这个类,如果有就删除,如果没有,就添加
a[0].classList.contains("某个类名"):判断标签中是否有这个类,返回true活着false
a[0].classList.length:得到这个元素中类的个数
a[0].classList.item(i)/a[0].classList[i]:获取第i个类
用这个属性,就可以很方便的对元素的类进行操作
document还有一些简单的操作
document.anchors 得到所有带有name的<a>标签
document.links 得到所有带有href的<a>标签
document.images 得到所有的<img>标签
document.forms 得到所有的<form>标签
这是个方法都返回HTMLCollection对象,相当于NodeList对象 有length,item() []属性和方法
其实这四个方法就是上面方法的一些简写,本质都是一样的
write() writeln() open() close()方法
document.write():接收一个字符串参数,可以使字符串,js里的各种方法,或html标签,script标签,将执行的结果输出到页面中,
如果有</script>要将其转义为<\/script>,否则识别到</script>时会使结束js的加载。
如果在整个页面都加载完再调用这个方法的话,就会把之前的页面覆盖,如果在页面加载过程中调用,则不会覆盖。
document.writeln() 与document.write()作用相同,不过最后会自动添加一个换行符
open() close() 会分别打开和关闭网页的输出流。如果在页面加载过程中调用document.write()则不用调用这两个方法
如果在页面加载结束调用document.write(),则会自动调用document.open()擦出之前页面的内容,然后执行完document.write()后自动调用
document.close()关闭输入流,不用显示调用这两个方法。
createElement()方法
用document.createDocument()方法,可以创建元素,括号里为元素名
例如var aaa=document.createDocument("div")
此时则创建了一个div元素,存储在aaa中,可以用appendChild等方法将aaa即div元素插入到html文档中
document