收藏
天蓬老師批改狀態(tài)：合格
老師批語：其實任何一種都可以獲取到元素, 肯定是選擇最簡單的方式
<!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.節(jié)點是dom中的最小單元// 2.節(jié)點：元素<h3>,文本節(jié)點<h3>中的文本，注釋節(jié)點，片段節(jié)點<p>,文檔節(jié)點documenet/console.log(document);//節(jié)點類型console.log(document.nodeType); //9//節(jié)點名稱console.log(document.nodeName); //#document//節(jié)點的值console.log(document.nodeValue); //null//查看文檔類型console.log(document.doctype); // <!DOCTYPE html>//根節(jié)點<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="http://ipnx.cn">PHP中文網</a></p><script>var div = document.querySelector("div");console.log(div.childNodes); //獲取元素的子節(jié)點集合// nodeType = 3 :文本節(jié)點：返回節(jié)點的節(jié)點類型console.log(div.childNodes.item(0).nodeType);// nodeType = 1 :元素節(jié)點console.log(div.childNodes.item(1).nodeType);//過濾掉節(jié)點集合中的非元素節(jié)點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); //文檔節(jié)點的第一節(jié)點console.log(div.firstElementChild); //返回指定元素的第一個子元素console.log(div.lastElementChild); //返回指定元素的最后一個子元素console.log(div.children.item(0)); //子元素集合的第一個元素var li =document.querySelector('li');console.log(li.parentNode); //元素父節(jié)點//充當父節(jié)點永遠不可能是文本或屬性，只能是元素或文檔console.log(li.parentElement); //回的是當前元素父節(jié)點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>元素的動態(tài)添加與刪除</title></head><body><ul></ul><script>var h2 = document.createElement('h2');//createElement 創(chuàng)建元素h2.innerText = '大家辛苦了';h2.style.color = 'red';h2.innerHTML = '大家<span style="color:green">辛苦了</span>';document.body.appendChild(h2);//向節(jié)點的子節(jié)點列表的末尾添加新的子節(jié)點。var ul =document.querySelector('ul');//為防止每添加一個元素導致頁面DOM樹重新渲染一次//借助文檔片斷來解決這個問題//先創(chuàng)建一個臨時文檔片斷//將生成的10個li添加到內存中的這個文檔片斷節(jié)點中//將這個文檔片斷一次性添加到頁面，此時頁面只會渲染一次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>
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
