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 教程