概述
- 每个载入到浏览器中的HTML文档都会生成一个对应的Document对象,通过操作该Document对象,可以达到操作该HTML文档的目的;
- Document对象是DOM的核心对象(基础对象);
常用属性
-
body
-
提供
body
标签元素的访问(获取body
标签对应的Element对象)。document.body;
-
-
title
-
提供
title
标签元素的访问(获取title
标签对应的Element对象)。document.title='新标题';
-
-
URL
-
获取当前页面的URL。
document.URL
-
-
images
-
获取当前页面所有图片的访问。(获取所有
img
标签对应的Element对象数组var imgElementArray=document.images; for(var imgEle of imgElementArray) { console.log(imgEle); }
-
-
forms
-
获取当前页面所有表单的访问。(获取所有
form
标签对应的Element对象数组)
-
var formElementArray=document.forms;
for(var formEle of formElementArray){
console.log(formEle);
}
常用函数
-
getElementById()
-
获取当前页面指定id属性值的第一个元素对象。
-
参数
- 目标id属性值。
-
返回值
- 查找到的Element元素对象。如果不存在指定元素,则返回null;
var myDiv1Element=document.getElementById('myDiv');
-
-
getElementsByTagName()
-
获取当前页面指定标签名称的所有元素对象(元素集合)。
-
参数
- 目标标签名称。
-
返回值
- 查找到的Element元素对象集合。如果不存在指定元素,则返回空集合(长度为0)。
-
var divElementArray=document.getElementsByTagName('div');
for(var divEle of divElementArray){
console.log(divEle);
}
-
getElementsByClassName()
-
获取当前页面指定class属性值的所有元素对象(元素集合)。
-
参数
- 目标class属性值。
-
返回值
- 查找到的Element元素对象集合。如果不存在指定元素,则返回空集合(长度为0)。
-
var demoClassElementArray=document.getElementsByClassName('demo');
for(var clEle of demoClassElementArray){
console.log(clEle);
}
-
getElementsByName()
-
获取当前页面指定name属性值的所有元素对象(元素集合)。
-
参数
- 目标name属性值。
-
返回值
- 查找到的Element元素对象集合。如果不存在指定元素,则返回空集合(长度为0)。
-
var testNameElementArray=document.getElementsByName('test');
for(var nameEle of testNameElementArray){
console.log(nameEle);
}
-
querySelector()
-
获取指定CSS选择器选择结果中的第一个元素。
-
参数
- 目标CSS选择器语法。
-
返回值
- 选择结果中第一个Element元素对象。
-
var inputElement=document.querySelector('input[name="test"]');
-
querySelectorAll()
-
获取指定CSS选择器选择结果中的所有元素。
-
参数
- 目标CSS选择器语法。
-
返回值
- 存储了选择结果中所有Element元素对象的集合。
-
var divElementArray=document.querySelectorAll('div');
-
createElement()
-
创建指定名称的元素节点,并将创建的元素节点作为返回值返回。
-
参数
- 目标标签名称。
-
返回值
- 创建的新元素对象。
-
var aElement=document.createElement('a');
-
write()
-
向当前HTML文档写出HTML内容。
-
参数
- 要写出的HTML内容(字符串)。
-
返回值
- 无。
-
document.write(`<img src='图片路径'/>`);
-
writeln()
-
向当前HTML文档写出HTML内容后添加换行符(
\n
)。 -
参数
- 要写出的HTML内容(字符串)。
-
返回值
- 无。
-
document.writeln(`<img src='图片路径'/>`);