JavaScript Dom对象的操作
目录
- 一、核心
- 1、获得Dom节点
- 2、更新节点
- 2.1 实战演练
- 3、删除Dom节点
- 4、插入节点
- 4.1 把已有的标签进行插入
- 4.2 创建一个新的标签,实现插入
- 4.3 在子节点前插入(insertBefore)
一、核心
浏览器网页就是一个Dom树形结构
- 更新：更新Dom节点
- 遍历Dom节点：获得Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点
要操作一个Dom节点,就必须要先获得这个Dom节点
1、获得Dom节点
<body>
<div id="div1">
<h1 id="h"></h1>
<p class="p1"></p>
</div>
</body>
//通过标签
document.getElementsByTagName('h1');
//通过id
document.getElementById('div1');
//通过class
document.getElementsByClassName('p1');
//获取父节点
h.parentElement
//获取父节点下所有子节点
div1.children[index];
//获取当前节点下,第一个节点
div1.firstElementChild;
//获取当前节点下,最后一个节点
div1.lastElementChild;
//获取下一个节点
h.nextElementSibling;
2、更新节点
//更新文本的值 div1.innerText='修改文本的值'; //更新超文本,可以解析html文本标签 div1.innerHTML='<strong>添加超文本</storng>'; //更新css div1.style.color='red'; div1.style.fontSize='20px';//驼峰命名 div1.style.padding='2em';
2.1 实战演练
获取id
没改之前
操作input
3、删除Dom节点
删除节点步骤：先获取父节点,再通过父节点删除自己
let self=document.getElementById('p1');//获取删除节点
let father=self.parentElement//获取父节点
father.removeChild(self);//通过父节点删除节点
注意：删除节点的时候，子节点数组是在不断地变化,所以不能通过数组静态连续删除,只能多次通过动态删除
4、插入节点
我们获得某个Dom节点,假设这个 Dom节点是空的,我们通过innerHtML就可以添加一个元素,但是这个Dom节点已经存在元素了,就会产生覆盖
<body> <p id="p1">Java</p> <div id="div1"> <p>JavaScript</p> <p>css</p> <p>C</p> </div> </body>
4.1 把已有的标签进行插入
let a=document.getElementById('div1');
let b=document.getElementById('p1');
a.appendChild(b);//追加
效果
4.2 创建一个新的标签,实现插入
let a=document.createElement('p');//创建节点 p标签
a.id='p2';
a.innerText='hello,小沈';
let list=document.getElementById('div1');//获取div1 id
list.appendChild(a);//追加子节点
//创建标签节点
let a=document.createElement('script');
a.setAttribute('type','text/javascript');
效果：
//创建style标签节点
let st=document.createElement('style');
st.setAttribute('type','text/css');
st.innerHTML='body{ background-color:pink;}';
let hd=document.getElementsByTagName('head')[0];//注意点,head在第0个元素。
hd.appendChild(st);
效果：
4.3 在子节点前插入(insertBefore)
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="p1">Java</p>
<div id="div1">
<p id="px">JavaScript</p>
<p id='p2'>css</p>
<p id="p3">C</p>
</div>
<script type="text/javascript">
//拥有子节点的父节点
let list=document.getElementById('div1');
let self=document.getElementById('p2');
let befoe=document.getElementById('p1');
list.insertBefore(befoe,self);
</script>
</body>
</html>
效果：
到此这篇关于JavaScript Dom对象的操作的文章就介绍到这了,更多相关JavaScript Dom对象操作内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JavaScript基础语法、dom操作树及document对象
第一部分 基本语法: 1.数据类型(字符串.小数.整数.布尔.时间日期) 复制代码 代码如下: var s="3.14" var n=parsefloat(s) s+=5; var s="abc3.14" var n=parsefloat(s) //NaN s+=5;//解析转换成小数型 var d=parseInt(s)//解析转换成整数型 isNaN(字符串),判断是不是数字模样的字符串,是-false:否-true 2.变量 3.运算符:四大类 4.表达式(为
-
javascript学习基础笔记之DOM对象操作
DOM文档对象模型是HTML和XML的应用程序接口(API),DOM将整个页面规划成由节点层次构成的文档.DOM对象给予开发者对HTML的访问权限,并且使开发者能将HTML作为XML文档来处理和查看.DOM对象是与语言无关的API,意味着它的实现并不是与javascript绑定,这在于初学者来说可能会理解错误.DOM是针对XML的基于树的API,它关注的不仅仅是解析XML代码,而是用一系列相互关联的对象来表示这些代码,而这些对象可以被修改,而且无需重新解析代码就能直接访问它们.由于DOM的使用上
-
js对象关系图 方便dom操作
js对象关系图 JavaScript 对象参考手册 本参考手册描述每个对象的属性和方法,并提供实例. Array Boolean Date Math Number String RegExp Global Browser 对象参考手册 本参考手册描述每个对象的属性和方法,并提供实例. Window Navigator Screen History Location HTML DOM 对象参考手册 本参考手册描述每个对象的属性和方法,并提供实例. Document Anchor Area Base
-
JavaScript——DOM操作——Window.document对象详解
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById("id");将找到的元素放在变量中: docunment.getElementsByName("name"):根据name找,找出来的是数组: docunment.getElementsByTagName("name"):根据标签名找,找
-
js/jQuery对象互转(快速操作dom元素)
复制代码 代码如下: // jquery对象转js对象 $('#search')[0].checked=true; // js对象转jquery对象 var obj = document.getElementById('search'); alert($(obj).checked);
-
JS获取dom 对象 ajax操作 读写cookie函数
复制代码 代码如下: var LF = {}; LF.version = '1.0.0'; //全局函数 function $(objName) { return document.getElementById(objName); } function $name(objName) { return document.getElementsByName(objName); } function $tag(objName) { return document.getElementsByTagNam
-
Javascript操作dom对象之select全面解析
html代码: <select id="university"> <option value="北京大学">北京大学</option> <option value="清华大学">清华大学</option> <option value="北京电影学院">北京电影学院</option> </select> js原生操作 1.获取sele
-
JavaScript Dom对象的操作
目录 一.核心 1.获得Dom节点 2.更新节点 2.1 实战演练 3.删除Dom节点 4.插入节点 4.1 把已有的标签进行插入 4.2 创建一个新的标签,实现插入 4.3 在子节点前插入(insertBefore) 一.核心 浏览器网页就是一个Dom树形结构 更新:更新Dom节点 遍历Dom节点:获得Dom节点 删除:删除一个Dom节点 添加:添加一个新的节点 要操作一个Dom节点,就必须要先获得这个Dom节点 1.获得Dom节点 <body> <div id="div1&
-
JavaScript DOM 对象深入了解
什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近.单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果.应用于WEB.这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理.否则就是单纯的在语法上做研究了.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起
-
JavaScript DOM元素常见操作详解【添加、删除、修改等】
本文实例讲述了JavaScript DOM元素常见操作.分享给大家供大家参考,具体如下: DOM概念 DOM(Document Object Model):文档对象模型. 通过开发者工具的Elements标签页可以查看 通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点 整个文档是由一系列节点对象组成的一棵树. 节点(Node)包括元素节点(1).属性节点(2).文本节点(3)(1..2..3..代表节点类型)_ var th1= document.getElementByI
-
JavaScript Dom 绑定事件操作实例详解
本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作.分享给大家供大家参考,具体如下: JavaScript Dom 绑定事件 // 先获取Dom对象,然后进行绑定 document.getElementById('xx').onclick document.getElementById('xx').onfocus // 谁调用这个函数,这个this就指向谁 this:当前出发事件的标签.全局对象 window 一.绑定方式 <input id='
-
javascript DOM对象的学习实例代码
DOM对象的学习 function searchNode(){ /*文本节点*/ /*元素节点*/ /*属性节点*/ var nodes=document.getElementsByTagName("li"); alert("节点数"+nodes.length+"第一个节点元素的名称"+nodes[0].tagName+";第四个节点的第一个节点文本"+nodes[3].childNodes[0].nodeValue); va
-
JavaScript操作DOM对象详解
一.DOM基础 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档:O(对象)可以理解为类似Window对象之类的东西,可以调用属性和方法,这里我们说的是document对象:M(模型)可以理解为网页文档的树型结构. 1.节点 加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内