获取页面元素的5种方式

文档节点 : document
节点类型：document.nodeType
节点名称：document.nodeName
节点的值：document.nodeValue
文档类型：document.doctype
更节点：document.documentElement
头元素：document.head
标题：document.title
主体：document.body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom对象</title>
</head>
<body>
    <H3>hello php.cn</H3>
    <p>大家晚上好</p>
    <script>
        // 1.节点是dom中的最小单元
        // 2.节点：元素<h3>,文本节点<h3>中的文本，注释节点，片段节点<p>,文档节点documenet
        /
        console.log(document);
        //节点类型
        console.log(document.nodeType); //9
        //节点名称
        console.log(document.nodeName); //#document
        //节点的值
        console.log(document.nodeValue); //null
        //查看文档类型
        console.log(document.doctype); // <!DOCTYPE html>
        //根节点<html>
        console.log(document.documentElement); //html源码
        //头元素
        console.log(document.head); //获取head
        //标题
        console.log(document.title); //获取title
        //主体
        console.log(document.body);  //获取body   
    </script>
</body>
</html>

示例图：

返回的是一个元素对象的集合：document.getElementsByTagName
返回具有指定id的第一个元素(唯一) ：document.getElementById
指定的id或name元素：namedItem()
获取class指定类名的元素集合 :document.getElementsByClassName
获取满足条件集合中的第一个元素(类似于id) :document.querySelector
获取满足条件的全部元素组成的集合: querySelectorAll

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何获取页面元素</title>
</head>
<body>
    <div id="list">
        <ul class="poster">
            <li name = "active">世界亚洲中国</li>
            <li>您是地球人</li>
            <li>我是中国人</li>
        </ul>
    </div>
    <script>
        //1.标签：返回的是一个元素对象的集合
        var ul = document.getElementsByTagName("ul");
        //getElementsByTagName 获取元素
        console.log(ul);
        // console.log(ul[0]);
        // console.log(ul.item(0));
        //2.id:只返回具有指定id的第一个元素(唯一)
        var list = document.getElementById("list");
        //getElementById 获取ID
        // console.log(list);
     var div =document.getElementsByTagName("div");
     console.log(div.namedItem("list")===list);
      //namedItem() 指定的id或name元素
     var lis = document.getElementsByTagName("li");
     console.log(lis);
     console.log(lis.namedItem("active"));
     var active = document.getElementsByTagName("li").namedItem("active");
     active.style.color ="red";
    // 在元素级别调用以上的api方法来获取元素
    var lis = ul.item(0).getElementsByTagName("li");
    var active=lis.namedItem("active");
    console.log(active);
    //3.class 返回一个html集合
    //获取class指定类名的元素集合
    var poster = document.getElementsByClassName("poster");
    console.log(poster);
    poster.item(0).style.border = "1px solid";
    //4.querySelector(css选择器)：获取满足条件集合中的第一个元素(类似于id)
    //  querySelectorAll(css选择器)：获取满足条件的全部元素组成的集合
    var div = document.querySelector("#list");
    //获取div，需要加标识符#
    var li = document.querySelector("#list li");
    var li = document.querySelector("#list li:nth-of-type(2)");
    var li = document.querySelector("#list li:last-of-type");
    //获取多个注意：.poster>*
    var lis = document.querySelectorAll(".poster > *");
    console.log(lis);
    </script>
</body>
</html>

获取元素的子节点集合 : childNodes
文本节点： nodeType = 3 : nodeType = 1 :元素节点
子节点集合 :childNodes 格式：节点.childNodes.item
元素的子元素集合 : children
节点的第一节点 : firstChild
元素的第一个子元素 : firstElementChild
元素的最后一个子元素 : lastElementChild
元素集合的第一个元素 :
元素父节点 : parentNode
当前元素父节点: parentElement


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>node,nodelist</title>
</head>
<body>
    <div id="box">
        <h2>Javascript</h2>
        <p>通用前端脚本语言</p>
        <li>学习让我感到很充实</li>
    </div>
    <p><a href="https://www.php.cn">PHP中文网</a></p>
     <script>
         var div = document.querySelector("div");
       console.log(div.childNodes); //获取元素的子节点集合
       // nodeType = 3 :文本节点：返回节点的节点类型
       console.log(div.childNodes.item(0).nodeType);
         // nodeType = 1 :元素节点
        console.log(div.childNodes.item(1).nodeType);
        //过滤掉节点集合中的非元素节点
        for(var i = 0; i < div.childNodes.length; i++)
        {
            var currentNode = div.childNodes.item(i);
            if (currentNode.nodeType == 1)
            {
                console.log(currentNode.tagName.toLowerCase());
            }
        }
        console.log(div.children); //元素的子元素集合
        console.log(div.firstChild); //文档节点的第一节点
        console.log(div.firstElementChild); //返回指定元素的第一个子元素
        console.log(div.lastElementChild);  //返回指定元素的最后一个子元素
        console.log(div.children.item(0)); //子元素集合的第一个元素
        var li =document.querySelector('li');
        console.log(li.parentNode); //元素父节点
        //充当父节点永远不可能是文本或属性，只能是元素或文档
        console.log(li.parentElement); //回的是当前元素父节点
        console.log(li.parentElement === li.parentNode)
     </script>
</body>
</html>

创建元素 : createElement
创建文件碎片节点： document.createDocumentFragment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的动态添加与删除</title>
</head>
<body>
    <ul></ul>
    <script>
        var h2 = document.createElement('h2');
        //createElement 创建元素
        h2.innerText = '大家辛苦了';
        h2.style.color = 'red';
        h2.innerHTML = '大家<span style="color:green">辛苦了</span>';
        document.body.appendChild(h2);
         //向节点的子节点列表的末尾添加新的子节点。
        var ul =document.querySelector('ul');
        //为防止每添加一个元素导致页面DOM树重新渲染一次
        //借助文档片断来解决这个问题
        //先创建一个临时文档片断
        //将生成的10个li添加到内存中的这个文档片断节点中
        //将这个文档片断一次性添加到页面，此时页面只会渲染一次
         var frag = document.createDocumentFragment();
            for(var i = 0; i< 10; i++)
        {
            var li =document.createElement('li');
            li.innerText = '列表项'+(i + 1);
            frag.appendChild(li);
        }
        ul.appendChild(frag);
    </script>
</body>
</html>

添加绑定事件：addEventListener
取消事件的默认动作：preventDefault

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件基础</title>
</head>
<body>
    <button onclick="alert(this.firstChild.nodeValue);">点击我</button>
    <button>点我试试</button>
    <a href="http://www.php.com/0814/demo.html">我是超链接</a>
</body>
   <script>
       //获取第二个按钮
       var but = document.querySelector('button:nth-of-type(2)');
       but.addEventListener('click',function(ev){
          //添加绑定绑定事件
       var h2 = document.createElement("h2");
           h2.style = "width:100px;height:50px;background:green;";
           but.style = "color:red;width:100px;height:50px;";
       },false);
       but.addEventListener('mouseout',function(ev){
           var h2 = document.createElement("h2");
            h2.style = 'none';
             document.body.appendChild(h2);
       },false);
       var link = document.links.item(0);
        link.onclick = function(ev)
        {
            ev.preventDefault();
           but.style = 'none';  
        };
   </script>
</html>