Document 文档节点
document节点对象是文档的根节点,每张网页都有自己的document对象,window.document属性就指向这个对象,只要浏览器开始载入HTML文档,该对象就存在了,可以直接使用.
-- document.doctype -- 获取doctype节点;
<script>
var doctype = document.doctype
console.log(doctype) // < !doctype html >
</script>
如果网页内没有声明文档类型,则返回null;
-- document.documentElement -- 返回当前文档的根元素
返回当前文档内除<!doctype html>的所有内容;
<script>
var doct = document.documentElement
console.log(doct)
</script>
document.documentElement.PNG
-- document.body -- 返回文档中的body;
-- document.head -- 返回文档中的head;
<script>
var hed = document.head
console.log(hed)
var bod = document.body
console.log(bod)
</script>
head和body.PNG
-- document.links -- 返回当前文档中所有设定了"href"属性的
<a>节点以及<area>节点;
<body>
<div>
<a href=""></a>
<span>
<area shape="" coords="" href="" alt="">
</span>
</div>
</body>
<script>
var links = document.links
for(var i = 0;i<links.length;i++){
console.log(links[i])
}
</script>
a与area.PNG
-- document.forms -- 返回当前文档所有的form表单节点;
有两种返回方式:
<body>
<form action="" name="foo" id="bar"></form>
</body>
<script>
document.forms[0] === document.forms.foo
document.forms.bar === document.forms.foo
console.log(document.forms[0])
console.log(document.forms.bar)
</script>
form的两种添加方式.PNG
-- document.images -- 返回页面所有的img图片节点;
-- document.title -- 返回页面的所有标题,可读可写;
-- document.charset -- 返回页面的编码方式;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="" alt="" class="img1" id="img2">
</body>
<script>
console.log(document.images)
console.log(document.title)
console.log(document.charset)
</script>
</html>
img;title;charset.PNG
下面写的是三种创建方式:
-- document.createElement -- 创建元素节点
-- document.createTextNode -- 创建元素节点
-- document.createComment -- 创建元素节点
<body>
<div></div>
</body>
<script>
var div = document.getElementsByTagName('div')[0]
var qqq = document.createElement('p')
var www = document.createTextNode("我是谁,我在哪,我要干什么")
var eee = document.createComment("hehehehe")
div.appendChild(qqq)
div.appendChild(www)
div.appendChild(eee)
console.log(div)
</script>
document.createComment方法的参数是一组字符串,会变成注释节点中的内容.
三种创建方式.PNG
-- document.createAttribute -- 创建属性节点:
属性节点的创建方法也有两种:
<body>
<div></div>
</body>
<script>
var div = document.getElementsByTagName('div')[0]
var a = document.createAttribute("href")
//第一种
a.value = "div1"
div.setAttributeNode(a)
//第二种
div.setAttribute("class","div2")
</script>
创建属性节点.PNG
