原生js——与document有关的属性和方法
1.属性、属性值:
-
.nodeType:9;
-
.nodeName:#document;
-
.nodeValue:null;
-
.parentNode:null;
-
.ownerDocument:null;
若要查看 document 的其他属性值,直接在控制台输出即可; -
.documentElement:取得整个
<html>
元素的引用; -
.body:取得对
<body>
元素的引用; -
.doctype:取得对
<!DOCTYPE>
的引用; -
.title:取得文档标题;
-
.url:取得完整的URL,和domain互相关联;
-
.referrer:取得来源页面的URL;
-
.domain:对网页域名的一些设置,domain一旦发生更改(松散、耦合之间的转换),就不能再恢复。和url互相关联;
注意某个元素的.parentNode属性和.childNodes属性,可以在浏览器控制台打印查看;
2.常用方法:
- .getElementById( idName ):通过id获得对元素的引用;
- .getElementsByTagName( tagName ):通过标签名获得对元素的引用;
扩展( 不是针对document对象 ):.namedItem( 索引值 ) :可以通过元素的name特性取得集合中的项,也可以使用" [] "语法来取得对集合中项的引用;注:为防止bug,表单name尽量不要和id相同;
-
.getElementsByName( attriubuteName ):获取具有指定特性名的所有元素,经常用于表单;
-
.querySelector():HTML5新扩展,获取匹配的第一个元素,如果有多个相同的类名的div,则只会获取第一个div,参数类型多样;
-
.querySelectorAll():HTML5新扩展,获取匹配的所有元素,得到的是一个nodeList集合,参数类型多样;
// 注意,如果传入类名,一定要加".",传入id,一定要加"#";这是和其他方法在传值时的不同; var sth = someNode.querySelector(".class"); var sth = someNode.querySelector("#id");
-
.implementation.hasFeature( domFunctionName,domFuctionVersion ):检测浏览器对DOM功能和版本的支持,一般用于解决浏览器兼容问题;
-
.createElement( tagName ):向文档树中添加一个新元素;
-
.write():输出文本;
-
.write():输出文本,外加一个换行符(\n);
-
.open():打开网页的输出流,在网页加载期间用了write()、writeln(),就可以不用;
-
.close():关闭网页的输出流,同上;
扩展——属性集合:
-
.anchors:表示所有带有name特性的
<a>
标签; -
.form:表示文档中所有的
<form>
标签; -
.images:表示文档中所有的
<img>
标签; -
.links:表示文档中带有href特性的
<form>
标签; -
结束语…………………………福利时间到………………………………
大家同为程序员,在这里给大家真诚的送上福利。