剑指前端(前端入门笔记系列)——DOM(元素节点…
2019-08-14 10:02:59来源:博客园 阅读 ()
DOM(元素节点)
<div id="box">原本存在的</div> <script type="text/javascript"> var exDiv = document.querySelector("#box"); //原本存在的div var myDiv = document.createElement("div"); //新增的div var mySpan = document.createElement("span"); //新增的span // 父元素.appendChild(新创建的子元素) document.body.appendChild(myDiv); exDiv.appendChild(mySpan); </script>
- 直接删除获取到的元素节点
<div id="box1"> <p>p1</p> <p>p2</p> </div> <div id="box2"> <span id="span1">span1</span> <span id="span2">span2</span> <span id="span3">span3</span> </div> <script type="text/javascript"> var exDiv1 = document.getElementById("box1"); exDiv1.remove();
</script>
- 先获取要删除的元素节点的父元素节点,然后通过其父元素节点来删除儿子元素节点完成操作。
<div id="box1"> <p>p1</p> <p>p2</p> </div> <div id="box2"> <span id="span1">span1</span> <span id="span2">span2</span> <span id="span3">span3</span> </div> <script type="text/javascript"> var exDiv1 = document.getElementById("box1"); var exDiv2 = document.getElementById("box2"); var exSpan2 = document.getElementById("span2"); document.body.removeChild(exDiv1); exDiv2.removeChild(exSpan2); </script>
<div id="box"> <p>p1</p> <p>p2</p> </div> <script type="text/javascript"> var obox = document.getElementById("box"); console.log(obox.outerHTML); obox.outerHTML = "<span id='"+ obox.id +"'>"+ obox.innerHTML +"</span>" </script>
- 常规
<div id="box">div_id_1</div>
<div id="box">div_id_2</div>
<div id="char">div_id_2</div>
<div class="cont">div_class_1</div>
<div class="cont">dic_class_2</div>
<div class="pre">dic_class_2</div>
<span>span1</span>
<span>span2</span>
<input type="text" name="user" id="user2" value="user2" />
<input type="text" name="user" id="user1" value="user1" />
<input type="text" name="pass" id="user" value="pass" />
<script type="text/javascript">
//id:返回的是单个元素,就算有多个,获取的也只是一个
var oBox = document.getElementById("box");
console.log("id选择结果:" , oBox);
console.log("直接获取结果的网页内容" , oBox.innerHTML);
console.log("第一个" , oBox[0]);
console.log("第一个的网页内容oBox[0].innerHTML会报错");
console.log("-------------------------------------------");
//class:返回的是数组,就算只有一个,获取的也是数组
var aCont = document.getElementsByClassName("cont");
console.log("class选择结果:" , aCont);
console.log("直接获取结果的网页内容" , aCont.innerHTML);
console.log("第一个" , aCont[0]);
console.log("第一个的网页内容" , aCont[0].innerHTML);
console.log("-------------------------------------------");
//tag:返回的是数组,就算只有一个,获取的也是数组
var aSpan = document.getElementsByTagName("span");
console.log("tag选择结果" , aSpan);
console.log("直接获取结果的网页内容" , aSpan.innerHTML);
console.log("第一个" , aSpan[0]);
console.log("第一个的网页内容" , aSpan[0].innerHTML);
console.log("-------------------------------------------");
//name:返回的是数组,就算只有一个,获取的也是数组,
var aUser = document.getElementsByName("user");
console.log("name选择结果" , aUser);
console.log("直接获取结果的网页内容" , aUser.innerHTML);
console.log("第一个" , aUser[0]);
console.log("第一个的网页内容" , aUser[0].innerHTML);
</script>
- ES5新增
<ul>
<li>1</li>
<li class="two">2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="msg">
<h2>msg_h2_1</h2>
<h2>msg_h2_2</h2>
<span>msg_span</span>
</div>
<div id="box">box_1</div>
<div id="box">box_2</div>
<div id="box">box_3</div>
<div class="cont">cont_1</div>
<div class="cont">cont_2</div>
<div class="cont">cont_3</div>
<span>span_1</span>
<span>span_2</span>
<span>span_3</span>
<input type="text" name="sex" value="" />
<input type="text" name="sex" value="" />
<input type="text" name="user" value="" />
</body>
<script type="text/javascript">
//返回的是单个元素,就算有多个,获取的也只是第一个
var obj1 = document.querySelector("#box");
var obj2 = document.querySelector(".cont");
var obj3 = document.querySelector("span");
var obj4 = document.querySelector("#msg h2");
var obj5 = document.querySelector("#box,.cont");
console.log("以下为querySelector获取结果");
console.log("#box匹配" , obj1);
console.log(".cont匹配" , obj2);
console.log("span匹配" , obj3);
console.log("#msg h2匹配" , obj4);
console.log("#box,.cont匹配" , obj5);
console.log("----------------------------------------------------------");
//返回的是数组,就算只有一个,获取的也是数组,操作数组中的数据时,要解析
var arr1 = document.querySelectorAll("#box");
var arr2 = document.querySelectorAll(".cont");
var arr3 = document.querySelectorAll("span");
var arr4 = document.querySelectorAll("#msg h2");
var arr5 = document.querySelectorAll("#msg *");
var arr6 = document.querySelectorAll("#box,.cont,span");
console.log("以下为querySelectorAll获取结果");
console.log("#box匹配" , arr1);
console.log(".cont匹配" , arr2);
console.log("span匹配" , arr3);
console.log("#msg h2匹配" , arr4);
console.log("#msg *匹配" , arr5);
console.log("#box,.cont,span匹配" , arr6);
</script>
- 父子关系
<div class="msg"> <div class="xbox"> <h2>msg_xbox_1</h2> <h2>msg_xbox_2</h2> </div> <h2>msg_1</h2> <h2>msg_2</h2> </div> <script type="text/javascript"> // 父选子元素:返回的是数组,就算只有一个,获取的也是数组,操作数组中的数据时,要解析 var omsg1 = document.querySelector(".msg"); console.log("msg的子元素:" , omsg1.children); console.log("msg的第一个子元素:" , omsg1.children[0]); // 第一个子元素:返回的是单个元素 var omsg2 = document.querySelector(".msg"); console.log("msg的第一个子元素:" , omsg2.firstElementChild); // 最后一个子元素:返回的是单个元素 var omsg3 = document.querySelector(".msg"); console.log("msg的最后一个子元素:" , omsg3.lastElementChild); console.log("----------------------------------------"); // 子选父元素:返回的是单个元素 var oxbox = document.querySelector(".xbox"); console.log("xbox的父元素:" , oxbox.parentNode); </script>
- 兄弟关系
<div id="box">box_1</div> <div id="box">box_2</div> <div class="msg"> <div class="xbox"> <h2>msg_xbox_1</h2> <h2>msg_xbox_2</h2> </div> <h2>msg_1</h2> <h2>msg_2</h2> </div> <div class="cont">cont_1</div> <div class="cont">cont_2</div> <script type="text/javascript"> // 上一个兄弟元素:返回的是单个元素 var omsg1 = document.querySelector(".msg"); console.log("msg的上一个兄弟元素:" , omsg1.previousElementSibling); // 下一个兄弟元素:返回的是单个元素 var omsg2 = document.querySelector(".msg"); console.log("msg的下一个兄弟元素:" , omsg2.nextElementSibling) </script>
原文链接:https://www.cnblogs.com/AI-fisher/p/11121665.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- javascript面向对象入门基础详细介绍 2020-03-29
- js调用刷新界面的几种方式 2020-03-05
- 高性能JavaScript循环语句和条件语句 2020-02-21
- Javascript实现前端简单的路由实例 2019-12-17
- 带你了解JavaScript 2019-10-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash