大家好这里是X,好久不见了,这两天在忙开学的事情,好久没更新博客了,抱歉抱歉啦,以下带来document类型的使用说明
目录🏫
Document类型的节点的特征
在前面讲过每个节点都具有三个基本特征:nodeType、nodeName、nodeValue,那么如果说是document类型的节点的话,则:
-
nodeType:9
-
nodeName:"#document"
-
nodeValue:null
另外,大家熟知的其他的属性: -
parentDocument:null
-
ownerDocument:null
在许多的浏览器(Firefox、Safari、Chrome、Opera等)都是可以通过脚本去访问Documengt类型的构造函数和原型,通过HTMLDocument示例的document对象可以取得与该HMLT有关的信息,进行操作页面等操作🏡那么我们怎么去访问HTML的元素呢?
具体看下:🪂🪂🪂
访问HTML元素的方法与区别
方法🎑
方法一:访问文档子节点
🤘第一个方法当然就是去访问文档的子节点,我们知道DOM是一个像“树”一样的结构,由所有的节点以及他们的子节点组合而成,故而访问节点便是我们入手的第一步
DOM标准规定Document节点的子节点可以是:DocumentType、Element、Comment、ProcessingInstructior以及两个内置的访问其子节点的快捷方式等等:
documentElement属性
🙂这个属性始终指向HTML页面中的元素,用它即可实现“定位”功能,当然,用childNodes列表访问的方法也是可以的,但是用这个属性可以更快捷、更直接的访问该元素
😀
var my_html = document.documentElement;//取得对于<html>引用
//并且documentElement/firstChild/childNodes[0]的值都是相同的
//都是指向<html>元素
//测试:
alert(html == document.childNodes[0]);//true
alert(html == document.firstChild);//true
document.body属性
document对象还有body属性,可以直接指向元素,非常方便👛👛👛document.body是非常常用的
var my_body = document.body;//就是这么简单
//并且所有浏览器都支持这一属性噢
<!DOCTYPE>相信大家都不陌生啦,这一标签主要就是开发者可以通过doctype属性来访问html
var my_doct = document.doctype;//取得对<!DOCTYPE>的引用
但是这个就不像上述的body属性那样那么全能了,不同的浏览器对document.doctype的支持和兼容可以说还是有很大的区别的🔴🟡🟢所以这个属性的使用是很有限的
方法二
🤘第二个方法就是通过“文档信息”
以下先介绍几个属性是document对象有,但是以及一些标准的Document对象没有的属性 |
🚡title属性
var my_title = document.title;//取得文档的标题
document.title = "my title";//设置文档标题
🚡URL、domain、referrer
var my_url = document.URL;//取得完整的URL
var my_domain = document.domain;//取得完整的域名
var my_referrer = document.referrer;//取得完整的来自源页面的URL
学过计算机网络的朋友都知道URL和domain属性是相互关联的🚏这里X就不做过多的解释啦🏠
在这三个变量当中,只有domain是可以设置的当然啦,这个可以设置也是在符合domain规范的情况下设置的,这里的话我后续会出一篇博客详细讲讲这个的,所以在这里就先留个空吧🚚
🚡查找元素
终于到了查找元素的这一关键环节了🚉🚉🚉Document为此提供了两个方法:getElementById()和getElementsByTagName()
具体这两个方法可以点击该链接了解详情噢:暴打JavaScript
❕namedItem()方法
该方法可以通过元素的name特性取得集合中的某个特定的项,namedItem() 方法返回 HTMLCollection 对象中指定 ID 或 name 的元素,如果元素不存在返回 null✔
举个小例子💭
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>HTMLCollection namedItem() 方法测试样例</h1>
<p id="myElement">方法说明:namedItem() 方法返回指定 ID 或 name 属性的元素。</p>
<p>点击按钮返回 ID 为 "myElement" 的 p 元素内容:</p>
<button onclick="myFunction()">点我试试看</button>
<script>
function myFunction() {
var x = document.getElementsByTagName("P").namedItem("myElement");
alert(x.innerHTML);
}
</script>
</body>
</html>
结果💬
点击之前
点击之后会出现这样的提示框
❕getElementsByName()方法
getElementsByName() 方法可返回带有指定名称的对象的集合,该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性,另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。🔔🔔🔔
以下是网上的例子,我想不出例子了😂😹
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many elements named 'myInput'?" />
</body>
</html>
结果
点击前:
点击后:
❕getAttribute()方法和setAttribute()方法
getAttribute()方法可以把找到的元素的各种属性的值查询出来💛getAttribute()方法是一个函数,它只有一个参数——你打算查询的属性的名字,但是但是!!不过,getAttribute()方法不能通过document对象调用,我们只能通过一个元素节点对象调用它,也就是说你可以先通过前面讲到的查找元素的方法,先把元素给找出来,然后你才能去使用这个方法找出该元素的属性‼
❕setAttribute()方法
上面的getAttribute()方法是用来得到一个元素的属性,那么这个setAttribute()就是用来设置元素属性的📂,非常简单,以下同样来看个小栗子⚙
与getAttribute()方法相同,setAttribute()方法也是一个只能通过元素节点对象调用的函数,但是setAttribute()方法需要传递2个参数:
object.setAttribute(attribute, value)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="JavaScript">
function change() {
var input = document.getElementById("li1");
alert(input.getAttribute("title"));
input.setAttribute("title", "Y MONSTER");
alert(input.getAttribute("title"));
}
</script>
</head>
<body>
<ul id="u">
<li id="li1" title="X MONSTER">X</li>
<li>Y</li>
<li>Z</li>
</ul>
<input type="button" value="Change" onClick="change();" />
</body>
</html>
测试结果:
改变: