javascrip Document 类型
2019-01-29 本文已影响0人
able_波仔
JS 中通过Document类型表示文档,其中document的对象是HTMLDocument的实例,表示整个Html页面,通过document对象可以获取页面的有关信息。
1.获取文档的子节点
获取html元素节点:document.documentElement
获取body元素节点:document.body
获取<!DOCTYPE>的引用:document.doctype
2.文档信息
作为HTMLDocument的一个实例,document还可以获取网页上的一些信息,比如title属性,对应的就是<title>元素中的文本。
/*获取标题*/
var title = document.title
/*设置标题*/
document.title = '测试标题'
与网页有关的几个属性:
URL:即地址栏显示的URL
domain:当前页面的域名
var url = document.URL
var domain = document.domain
3.元素查找
document.getElementById(),getElementById()接收一个元素的ID,如果没找到该元素返回null
<p id="myPid">这是文本内容</p>
var p =document.getElementById('myPid')
document.getElementsByTagName(),getElementsByTagName()接收一个标签名,返回该网页下的所有该标签的集合
<input type="text" name="myText" value="这是测试内容"/>
//获取input标签
//返回一个HTMLCollection
var inputs = document.getElementsByTagName('input')
//获取input标签中name = ‘myText’ 元素
var inputName = inputs.namedItem('myText')
//对命名的项也可以使用方括号来访问
inputName = inputs['myText']
//获取所有的元素(*代表所有)
var allElement = document.getElementsByTagName("*")
//打印 input标签中的value值
alert(inputName.value)
document.getElementsByName(),getElementsByName()返回带有给定name特性的所有元素
<input type="text" name="myText" value="这是测试内容1"/>
<input type="text" name="myText" value="这是测试内容2"/>
<input type="text" name="myText1" value="这是测试内容3"/>
<input type="text" name="myText2" value="这是测试内容4"/>
//获取name = 'myText'的指定元素集合
var values = document.getElementsByName('myText')
4.特殊集合
除了以上的一些方法,document还有一些特殊的集合
1.document.anchors ,返回文中带有name 属性的所有<a>元素
<a href="test.html" name="a1">测试链接1</a>
<a href="test.html" name="a2">测试链接2</a>
<a href="test.html" >测试链接3</a>
<a href="test.html" >测试链接4</a>
var length = document.anchors.length // length = 2(只有两个包含name属性)
2.document.forms,返回所有的<form>元素与 document.getElementsByTagName("forms") 相同
3.document.links,返回含有href属性的所有<a>元素
<a href="test.html" >测试链接1</a>
<a href="test.html" >测试链接2</a>
<a >测试链接3</a>
var lenght = document.links.length //length =2(只有两个持有href元素)
4.document.images,返回所有的<img>元素与 document.getElementsByTagName("img") 相同