版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/82392982
目录
Document类型
document对象是HTMLDocument的一个实例,表示整个HTML页面。而且document对象是window对象的属性，因此可将其作为全局对象来访问。
console.log(window.document==document); //true下面是一个关于document对象的继承图:
特征
nodeType的值为 9
nodeName的值为 #document
nodeValue的值为 null
parentNode的值为 null
ownerDocument的值为 null属性
documentElement
返回当前文档的<html>节点
var html=document.documentElement; //取得对<html>的引用
body
返回当前文档的<body>节点
var html=document.body; //取得对<body>的引用 doctype
返回当前文档的文档类型<!DOCTYPE>
var doctype=document.doctype; //取得对<!DOCTYPE html>的引用
title
获取或设置文档的当前标题,该属性可读可写
console.log(document.title);
document.title="good world";
URL
只读属性将文档位置作为字符串返回
var url=document.URL //取得url
domain
获取或设置当前文档的起源的域部分
var domin=document.domin //取得域名
dir
表示文档文本的方向性。'rtl'从右到左;'ltr'从左到右
方法
getElementById()
返回文档中第一次出现ID值的元素，如果没有返回null
参数
要获取的元素ID
返回值
返回第一次匹配的元素,没有匹配返回null
//<div id="myDiv"></div>
var div=document.getElmentById('myDiv');
getElementsByTagName()
返回带有指定标签名的所有元素
参数
要取得元素的标签名
返回值
包含零或多个元素的HTMLCollection对象
示例
<div name="vv">1</div>
<div name="vv">
<span></span>
<div name="vv">3</div>
</div>
<script>
var divs=document.getElementsByTagName('div');
//访问HTMLCollection对象的属性
console.log(divs.length); //div数量
console.log(divs[0].name); //输入第一个div元素的name属性
console.log(divs.item(0).name); //输入第一个div元素的name属性
var mydiv=divs.namedItem('vv'); //返回集合中name值的第一个项
var mydiv=divs.['vv']; //返回集合中name值的第一个项
</script>
getElementsByName()
返回带有指定name特性的所有元素
返回值
返回一个NodeList具有给定元素name的集合
示例
<!DOCTYPE html>
<html lang="en">
<title>Example: using document.getElementsByName</title>
<form name="cc"></form>
<div name="cc"></div>
<script>
var cc_names = document.getElementsByName("cc");
console.log(cc_names); // nodeList(2)
</script>
</html>getElementsClassName()
返回具有给定类名的所有子元素的类数组对象(HTMLCollection)
示例
//获取具有"test"类的元素
document.getElementsByClassName('test');
//获取具有"test"和"blue"类的元素
document.getElementsByClassName('test blue');
createElement()
创建由其指定的HTML元素tagName
参数
第一个参数,一个字符串,指定要创建的元素类型。
第二个参数,可选的。ElementCreationOptions包含名为的单个属性的可选对象is，其值是先前使用的自定义元素的标记名称customElements.define()。
返回值
新的Element
示例
var newDiv=document.createElement('div');
var newContent=document.createTextNode("hello world");
newDiv.appendChild(newContent);
document.body.appendChild(newDiv);
createTextNode()
创建一个新的Text节点
参数
要放入的文本节点的数据
返回值
创建好的文本
示例
//<p id="p1">First line of paragraph.</p>
var newtext = document.createTextNode(text),
p1 = document.getElementById("p1");
p1.appendChild(newtext);
createAttribute()
创建一个新的属性节点,并返回它，该对象创建了一个实现Attr接口的节点
参数
包含属性名称的字符串
返回值
一个Attr节点
示例
var a = document.createAttribute("my_attr");
a.value = "newVal";
console.log(a instanceof Attr); //true
console.log(a.nodeName); //"my_attr"
文档流操作
//打开文档流
document.open();
//写入
document.write('<h1>hello world</h1>');
//关闭文档流
document.close();
集合
document.links 包含文档所有带有href特性的<a>元素
document.anchors 包含文档中所有带name特征的<a>元素
document.forms 包含文档中所有<form>元素
document.images 包含文档中所有<img>元素