大家好这里是X，好久不见了，这两天在忙开学的事情，好久没更新博客了，抱歉抱歉啦，以下带来document类型的使用说明
在前面讲过每个节点都具有三个基本特征：nodeType、nodeName、nodeValue，那么如果说是document类型的节点的话，则：
nodeType:9
nodeName:"#document"
nodeValue:null
另外，大家熟知的其他的属性：
parentDocument:null
ownerDocument:null
在许多的浏览器(Firefox、Safari、Chrome、Opera等)都是可以通过脚本去访问Documengt类型的构造函数和原型，通过HTMLDocument示例的document对象可以取得与该HMLT有关的信息，进行操作页面等操作🏡那么我们怎么去访问HTML的元素呢？
具体看下：🪂🪂🪂
🤘第一个方法当然就是去访问文档的子节点，我们知道DOM是一个像“树”一样的结构，由所有的节点以及他们的子节点组合而成，故而访问节点便是我们入手的第一步
DOM标准规定Document节点的子节点可以是：DocumentType、Element、Comment、ProcessingInstructior以及两个内置的访问其子节点的快捷方式等等：
🙂这个属性始终指向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是非常常用的
var my_body = document.body;//就是这么简单
//并且所有浏览器都支持这一属性噢
<!DOCTYPE>相信大家都不陌生啦，这一标签主要就是开发者可以通过doctype属性来访问html
var my_doct = document.doctype;//取得对<!DOCTYPE>的引用
但是这个就不像上述的body属性那样那么全能了，不同的浏览器对document.doctype的支持和兼容可以说还是有很大的区别的🔴🟡🟢所以这个属性的使用是很有限的
🤘第二个方法就是通过“文档信息”
| 以下先介绍几个属性是document对象有，但是以及一些标准的Document对象没有的属性 |
var my_title = document.title;//取得文档的标题
document.title = "my title";//设置文档标题
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
该方法可以通过元素的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() 方法可返回带有指定名称的对象的集合,该方法与 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()方法可以把找到的元素的各种属性的值查询出来💛getAttribute()方法是一个函数,它只有一个参数——你打算查询的属性的名字,但是但是!!不过，getAttribute()方法不能通过document对象调用,我们只能通过一个元素节点对象调用它,也就是说你可以先通过前面讲到的查找元素的方法,先把元素给找出来,然后你才能去使用这个方法找出该元素的属性‼
上面的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>
测试结果:
改变:
