![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：其实任何一种都可以获取到元素, 肯定是选择最简单的方式
Collection
Collection
<!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>
示例图：
<!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>
<!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>
<!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>
<!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>
