剑指前端(前端入门笔记系列)——DOM(元素节点)
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>
剑指前端(前端入门笔记系列)——DOM(元素节点)的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 《剑指offer》解题笔记
<剑指offer>解题笔记 <剑指offer>共50题,这两周使用C++花时间做了一遍,谨在此把一些非常巧妙的方法.写代码遇到的难点.易犯错的细节等做一个简单的标注,但不会太过 ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- 剑指前端(前端入门笔记系列)——DOM(元素大小)
DOM——元素大小 DOM中没有规定如何确定页面中与元素的大小,IE率先映入了一些属性来确定页面中元素的大小,以便开发人员使用,目前,所有主要的浏览器都已经支持这些属性了. 1.偏移量(单位为 ...
- 剑指前端(前端入门笔记系列)——DOM(基本组成与操作)
DOM——基本组成与操作 DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.他给文档提供了一种结构化的表达方 ...
- 《剑指offer》读书笔记
二叉树 重建二叉树 面试题6:(p55) 题目:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树. 假设输入的前序遍历和中序遍历的结果中都不含重复的数字. 例如输入前序遍历序列{1, 2, 4 ...
- 【剑指offer】删除链表中重复的节点,C++实现(链表)
0.简介 本文是牛客网<剑指offer>笔记. 1.题目 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针.例如,链表1-> ...
- DOM 元素节点几何量与滚动几何量
当在 Web 浏览器中查看 HTML 文档时,DOM 节点被解析,并被渲染成盒模型(如下图),有时我们需要知道一些信息,比如盒模型的大小,盒模型在浏览器中的位置等等,本文我们就来详细了解下元素节点的几 ...
- JavaScript 要点(十四)HTML DOM 元素(节点)
A.创建新的 HTML 元素 如需向 HTML DOM 添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <div id="div1"> ...
随机推荐
- idea安装、配置及基本使用
下载 下载地址:https://www.jetbrains.com/idea/download/#section=windows Ultimate为旗舰版,功能全面,插件丰富,按年收费. Commun ...
- 冬令营DAY3 T1 Matrix
题目描述 Description 生活中,我们常常用 233 表示情感.实际上,我们也会说 2333,23333,等等. 于是问题来了: 定义一种矩阵,称为 233 矩阵.矩阵的第一行依次是 2 ...
- 前端/H5/JS:通过URL下载文件并转存到其他服务器(微信),Blob文件转File文件
现在有一个图片URL,在自己服务器上,一个微信提供的媒体文件上传URL,我在前端通过JS实现转存微信服务器 1. http://file.xxx.com/asd.jpg 自己的 2.https://a ...
- Unable to instantiate Action, xxxAction, defined for 'showBlogDetails'
(忘了截图错误信息...) 使用SSH框架配置applicationContext.xml与struts.xml之间的映射关系 解决方案:保证applicationContext.xml中注册的bea ...
- WebBrowser内存泄露
使用WebBrowser控件开发的程序,占用内存会随着时间不停增长,最终内存溢出导致崩溃.究其原因是由于其自身的缺陷造成的.每一次加载新页面,WebBrowser就会多占用10-20M内存,有资料说是 ...
- asp.net调用c++的dll
只需要把dll文件拷贝到windows的system32目录下(64位系统为SysWOW64目录),如果操作系统为64位而dll为32位,还需在进程池启用32位支持.
- python 本地时间+8小时
current_time = (datetime.datetime.now() + datetime.timedelta(hours=8)).strftime('%Y-%m-%d %H:%M:%S')
- docker 学习操作记录 5
记录5 * Overheard at KubeCon: "microk8s.status just blew my mind". https://microk8s.io/docs/ ...
- Python内网渗透扫描器Ladon
Ladon Scanner For Python PyLadon 目前python版功能较少,无论在Windows还是Linux系统性能以及速度均也比不上Ladon.exe 唯一的优点是跨平台,后续会 ...
- Python3+Robot Framework+RIDE安装使用教程
一.说明 Python3----网上很多文章都是用Python2,Robot Framework的部分文档没更新也直接写着不支持Python3(如RIDE does not yet support P ...