JavaScript獲取DOM元素

時間 2020-05-31

標籤 javascript 獲取 dom 元素欄目 JavaScript 简体版

原文原文鏈接

　　獲取DOM元素
　　<ul id="list">
　　 <li class="item">item1</li>
　　 <li class="item" name="two">item2</li>
　　 <li class="item active">item3</li>
　　 <li class="item">item4</li>
　　 <li class="item">item5</li>
　　</ul>
　　<script>
　　 // const定義的變量不能夠修改，並且必須初始化。
　　 const cl = console.log.bind(console);
　　 //1,標籤
　　 // li 標籤獲取多個標籤使用 get Elements By Tag Name 按標記名獲取元素
　　 var lis = document.getElementsByTagName('li');
　　 cl(lis);
　　 cl("以上獲取全部li");
　　 // HTMLCollection:類數組
　　 // 能夠經過方法獲取須要的值：lis[鍵]或lis.item(鍵)
　　 cl(lis.item(2));
　　 cl("以上獲取其中li");
　　 //Ul標籤獲取
　　 var ul = document.getElementsByTagName('ul');
　　 cl(ul);
　　 cl("以上獲取全部ul");
　　 //2,ID（id是惟一的，不能用複數）
　　 //獲取單個標籤使用getElementById
　　 var ul = document.getElementById("list");
　　 // ul.style.cssText="color:red;list-type:none;border:1px solid;";
　　 cl(ul);
　　 cl("以上獲取ID爲**的UL");
　　 //3,class
　　 //獲取函數：getElementByClassName
　　 var lis = document.getElementsByClassName("item");
　　 cl(lis);
　　 cl("以上經過class獲取到li");
　　 //獲取某個li使用上方法
　　 // cl(lis.item(3));
　　 var lis = document.getElementsByClassName("item active");
　　 // document.querySelector(".item").style.color="red";
　　 cl(lis.item(2));
　　 cl("獲取active");
　　 //4,name
　　 var two = document.getElementsByName('two');
　　 cl(two);
　　 cl(two[0]);
　　 //5,css選擇器
　　 cl(document.querySelector("#list"));
　　 var item = document.querySelectorAll(".item");
　　 cl(item);
　　 cl("獲取css選擇器");
　　 //6,獲取
　　 var lis = document.querySelectorAll("#ul > li:nth-of-type(-n+3)");
　　 lis.forEach(function(item){
　　 item.style.color="yellow";
　　 });
　　 cl("獲取某個或多個");
　　</script>
　　遍歷元素節點
　　<script>
　　 var cl = console.log.bind(console);
　　 ul = document.querySelector('ul');
　　 //獲取全部(childNodes)子節點
　　 cl(ul.childNodes);
　　 //js 經常使用6個節點。
　　 // 1，元素
　　 // 2，屬性
　　 // 3，文本
　　 // 6，註釋
　　 // 9，文檔
　　 // 11，文檔片斷
　　 //nodeType（節點類型）nodeValue（節點值）nodeName（節點名稱）
　　 cl((ul.childNodes[0].nodeType) + "----節點0位置的類型和值----" + (ul.childNodes[0].nodeValue));
　　 cl((ul.childNodes[1].nodeType) + "----節點1位置的類型和值----" + (ul.childNodes[1].nodeValue));
　　 cl((ul.childNodes[3].nodeType) + "----節點3位置的類型和名稱----" + (ul.childNodes[3].nodeName));
　　 // 獲取最後一個節點
　　 cl(ul.childNodes[ul.childNodes.length-1]);
　　 cl("----------遍歷li---------");
　　 var ele = [];
　　 ul.childNodes.forEach(function(item){
　　 // push() 方法可向數組的末尾添加一個或多個元素，並返回新的長度
　　 //意思就是在this->ele[]數組裏面添加獲取到的li元素
　　 if(item.nodeType === 1) this.push(item);
　　 },ele);
　　 cl(ele);
　　 //獲取第一個子（firstChild）或最後一個子（lastChild）
　　 cl(ul.firstChild);
　　 cl(ul.lastChild);
　　 //獲取前一個兄弟(previousSibling)或後一個兄弟（nextSibling）
　　 cl((ul.lastChild.previousSibling) + "---先後兄弟子節點----" + (ul.firstChild.nextSibling));//節點拼接顯示的是類型元素
　　 cl(ul.firstChild.nextSibling);
　　 cl(ul.lastChild.previousSibling);
　　 </script>
　　遍歷元素節點
　　<script>
　　 var cl=console.log.bind(console);
　　 var ul = document.querySelector("ul");
　　 //children和childNodes區別
　　 //1，childNodes獲取全部節點
　　 //2，children獲取html類型節點
　　 //獲取元素數量方法有二
　　 cl(ul.children.length);
　　 //子元素計數（childElementCount）
　　 cl(ul.childElementCount);
　　 //獲取第一個元素子元素（firstElementChild）獲取最後一個元素子元素（lastElementChild）獲取某個子元素children[索引]
　　 cl(ul.firstElementChild);
　　 //獲取前一個/後一個請使用索引(nextElementSibling)/（previousElementSibling）
　　 cl(ul.children[2].previousElementSibling);
　　 // HTMLCollention元素節點沒有foEach方法
　　 cl("---for遍歷li元素---")
　　 for(var i = 0; i < ul.childElementCount;i++){
　　 cl(ul.children.item(i))
　　 }
　　</script>
　　dataset用戶自定義數據
　　<div id="user" data-id="100" data-user-name="admin" data-src="http://baidu.com"></div>
　　 <script>
　　 var cl = console.log.bind(console);
　　 var user = document.querySelector("#user")
　　 //dataset是用來專門訪問data-的屬性。
　　 cl(user.dataset.id)
　　 //js規則：多單詞鏈接線去掉，將首字母大寫
　　 cl(user.dataset.userName)
　　 // 更改數據
　　 user.dataset.userName = "super";
　　 cl(user.dataset.userName)
　　 </script>
　　body背景顏色切換小功能。
　　<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　 <meta charset="UTF-8">
　　 <title>classlist對象</title>
　　 <style>
　　 body{
　　 background:blue;
　　 }
　　 .p1{
　　 color:pink;
　　 font-size:28px;
　　 }
　　 .p2{
　　 background:#CCC;
　　 }
　　 .p3{
　　 font-weight:bold;
　　 text-align:center;
　　 }
　　 </style>
　　</head>
　　<body>
　　<p>首頁背景顏色切換</p>
　　 <div>
　　 <span></span>
　　 <span></span>
　　 <span></span>
　　 </div>
　　 <script>
　　 var cl = console.log.bind(console);
　　 var p = document.querySelector("p");
　　 //獲取class屬性。在js中是保留字，因此用className
　　 // cl(p)
　　 //添加一個class類屬性樣式
　　 p.classList.add("p2")
　　 //刪除
　　 // p.classList.remove("p2");
　　 //自動切換
　　 p.classList.toggle("p2");
　　 p.classList.toggle("p3")
　　 //替換(須要替換的屬性，替換的屬性）
　　 p.classList.replace("p3", "p2");
　　 var div = document.querySelector("div");
　　 document.querySelector("div").style.cssText = "border:1px solid;width:120px;height:35px;"
　　 // document.querySelectorAll("span").style.cssText = "border:1px solid ;padding:5px;width:30px;height:30px;"
　　 div.children[0].style.cssText = "border:1px solid ;width:30px;height:30px;display:flex;float:left;background:red"
　　 div.children[1].style.cssText = "border:1px solid ;width:30px;height:30px;display:flex;float:left;margin:0 5px 0 5px;background:blue"
　　 div.children[2].style.cssText = "border:1px solid ;width:30px;height:30px;display:flex;floay:left;background:yellow"
　　 //添加點擊事件並改變屬性樣式
　　 div.children[0].addEventListener("click",bgspan1,false)
　　 function bgspan1(ev){
　　 document.body.style.background = "red";
　　 }
　　 div.children[1].addEventListener("click",bgspan2,false)
　　 function bgspan2(ev){
　　 document.body.style.background="blue"
　　 }
　　 div.children[2].addEventListener("click",bgspan3,false)
　　 function bgspan3(ev){
　　 document.body.style.background = "yellow"
　　 }
　　 </script>
　　</body>
　　</html>css

1. 【記錄】Javascript獲取Dom元素位置
2. DOM如何獲取元素
3. vue $refs獲取dom元素
4. DOM獲取元素對象
5. vue獲取dom元素
6. javascript獲取元素
7. JavaScript獲取元素
8. 【20190228】JavaScript-獲取子元素
9. javascript獲取元素樣式
10. js獲取元素、jQuery獲取元素、vue獲取元素
更多相關文章...
• XML DOM 獲取節點值 - XML DOM 教程
• PHP imageaffinematrixget - 獲取矩陣 - PHP參考手冊
• YAML 入門教程
• Java 8 Stream 教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。