JS的Document类型
DocumentHTMLDocument继承自Document。 在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。document对象是window对象的一个属性,因此可以直接调用1.属性documentElement指向HTML页面中的<html>元素。title 获取文档的标题URL 获取URLdomain 取得域名,并且可以进行设置,在
Document
HTMLDocument继承自Document。 在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。document对象是window对象的一个属性,因此可以直接调用
1.属性
documentElement 指向HTML页面中的<html>元素。
title 获取文档的标题
URL 获取URL
domain 取得域名,并且可以进行设置,在跨域访问中经常会用到。
referrer 取得链接到当前页面的那个页面的URL,即来源页面的URL。
links 获取文档中所有带href属性的a元素
body 指向body元素
images 获取所有img对象,返回HTMLCollection类数组对象
forms 获取所有form对象,返回HTMLCollection类数组对象
2.查找元素的方法
getElementById() 返回指定 id 的一个元素。
getElementsByTagName() 返回一个HTMLCollection
(伪数组),包含指定标签名的所有元素。
getElementsByClassName() 返回一个HTML集合HTMLCollection
(伪数组),包含指定类名的所有元素。
<div id="div1">我是div1</div>
<div class="div2">啊啊</div>
<div class="div2">我是div2</div>
<script>
//查询id为div1的元素
var div = document.getElementById('div1');
console.log(div); //<div id="div1">我是div1</div>
//返回所有包含div标签的元素
var div1 = document.getElementsByTagName('div');
console.log(div1); // HTMLCollection(3) [div#div1,div.div2,div.div2,div1:div#div1]
//返回所有包含匹配div2的所有元素。
var div2 = document.getElementsByClassName('div2')
console.log(div2);//HTMLCollection(2) [div.div2,div.div2]
</script>
document.querySelector() 返回文档中指定的CSS选择器的第一个元素
<div id="div1">div1</div>
<div id="div1">div1</div>
<script>
//将第一个 div 里的内容替换为helloworld
document.querySelector("#div1").innerHTML = "HelloWorld!";
</script>
3.添加元素的方法
document.createElement(element)
创建一个新的HTML元素,一般需要与appendChild() 或 insertBefore()方法联合使用。
<div id="div1">div1</div>
<script>
var d1 = document.getElementById('div1')
var p1 = document.createElement('p')
p1.innerHTML = '哈哈哈'
// 向div1中插入p1
d1.appendChild(p1);
</script>
4.写入
document.write() 向文档写如文本或 HTML 表达式 或 JavaScript 代码。
<script>
document.write("<p>Helloworld!</p>");
document.write("<a>helloworld</a>");
</script>
更多推荐
所有评论(0)