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") 相同

上一篇下一篇

猜你喜欢

热点阅读