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节点的子节点可以是：Document、Element、Comment、ProcessingInstructior等等,具体看下：

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对象没有的属性

🚡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()就是用来设置元素属性的📂,非常简单,以下同样来看个小栗子?

<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>