DOM-访问元素

id：元素在文档中唯一标识符。
title：有关元素的附加说明信息，一般通过工具提示条显示出来。
lang：元素内容的语言编码，很少使用
dir：语言方向，职位“Ltr”（从左至右）、Rtl（从右至左），很少使用。
className：与元素的calss特性对应，即为元素指定的CSS类样式。

访问元素

　　1.getElementById()方法

　　　　使用getElementById()方法可以准确的获取文档中指定元素

　　　　document.getElementById(ID)；

　　　　参数ID表示文档中对应元素的id值。如果文档中不存在指定元素，则返回null。该方法只适用于document对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>
<body>
    
    <p id="attr">世界之大，无奇不有</p>
<ul>

</ul>
<script>
   var box= document.getElementById("attr");   //获取元素
   var nodename=box.nodeName;      //获取节点名称
   var nodetype=box.nodeType;      //获取节点类型
   var nodeparent=box.parentNode.nodeName;   //获取该节点的父节点
   var nodechilde=box.childNodes[0].nodeName; //获取该节点的父节点

alert("节点名称"+nodename+"节点类型"+nodetype+"父节点"+nodeparent+"子节点"+nodechilde); </script> </body> </html>

2.getElementsByClassName()方法

　　此方法获取的是元素的calss属性，从函数的名字可以知道，通过getElementsByClassName获取到的是一个数组，包括多个DOM元素，所以要执行DOM元素的方法，必须加一个索引，比如document.getElementsByClassName("class名")[0]。

　　而由于id是唯一的，所以通过getElementById只有一个DOM元素，可以直接调用DOM方法。

　　document.ElementsByClassName(class);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta  name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>
<body>
    
    <p id="attr" class="ff">世界之大，无奇不有</p>
<ul>

</ul>
<script>
   var box= document.getElementsByClassName("ff")[0];   //获取元素第一个
   var node=box.nodeName;
   alert(node);
</script>
</body>
</html>

3.使用getElementByTagName()方法

　　使用此方法可以获取指定标签名称的所有元素

　　document.getElementByTagName(tagName);

　　参数tagName表示指定名称的标签，该方法返回值为一个几点的集合，使用length属性可以获取集合中包含元素的个数，利用下标可以访问其中某个元素的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta  name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>
<body>
    
    <p id="attr" class="ff">世界之大，无奇不有</p>
<ul>

</ul>
<script>
  var box=document.getElementsByTagName("p")[0];    //获取标签为p的第一元素；
  alert(box.innerHTML);

</script>
</body>
</html>