JS操作DOM节点大全
1.Javascript删除节点
在Javascript中,只提供了一种删除节点的方法:removeChild()。
removeChild() 方法用来删除父节点的一个子节点。
语法:parent.removeChild(thisNode)
例子1
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
例子2
var thisNode=document.getElementById("demo");
thisNode.parentNode.removeNode(thisNode);
2.Javascript创建节点
createElement()用来创建一个元素节点,即 nodeType=1 的节点。
语法:document.createElement(tagName)
其中,tagName 为HTML标签的名称,并将返回一个节点对象。
例如,创建<div>标签和<p>标签的语句如下:
var ele_div=document.createElement("div");
var ele_p=document.createElement("p");
3.JavaScript:获取父节点
获取已知节点的父节点请使用 parentNode 。
语法:nodeObject.parentNode
其中,nodeObject 为节点对象(元素节点)。
例如,获取 id="demo"的节点的父节点:
document.getElementById("demo").parentNode;
4.Javascript插入节点
JavaScript insertBefore():插入子节点
insertBefore() 方法的作用是:在现有的子节点前插入一个新的子节点
语法:parentNode.insertBefore(newItem,existingItem);
newItem为待插入的节点,existingItem为已存在的节点
例如:移动某个列表项到另一个列表项:
var node=document.getElementById("myList2").lastChild;
var list=document.getElementById("myList1");
list.insertBefore(node,list.childNodes[0]);
5.JavaScript 添加最后一个子节点
appendChild() 方法向节点添加最后一个子节点。
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
语法:parentNode.appendChild(newListItem);
newListItem为待插入的节点
例如:转移某个列表项到另外一个列表项:
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
6.Javascript获取子节点
语法:nodeObject.children
其中,nodeObject 为节点对象(元素节点),返回值为所有子节点的集合(数组)。
例如,获取 id="demo" 的节点的所有子节点:
document.getElementById("demo").children;
7.Javascript获取兄弟节点
在Javascript中,通过 previousSibling 来获取上一个节点。
语法:nodeObject.previousSibling
其中,nodeObject 为节点对象(元素节点)。
实例
返回某节点之前紧跟的节点:
document.getElementById("item2").previousSibling;
8.Javascript 克隆(复制)节点
在JavaScript中,可以通过 cloneNode() 方法来克隆(复制)节点。
语法:nodeObject.cloneNode(boolean)
nodeObject 节点对象,即要克隆的节点
boolean 布尔值,是否完全克隆。
true:完全克隆。完全克隆一个节点,就是克隆它的一切,包括它的子节点,文本节点,凡是有的,一律克隆;
false:只克隆当前节点,不克隆任何子节点,也不克隆它所包裹的文本 。
实例:
var p = document.getElementsByTagName("p")[0];
var cP = p.cloneNode();//克隆p节点
var cP = p.cloneNode(true);//克隆p节点,深度克隆,克隆节点以及节点下面的子内容。
JS操作DOM节点大全的更多相关文章
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- JS 操作Dom节点之样式
为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...
- JS操作DOM节点查找
JS中常用的DOM操作事件,包括有节点查找,键盘鼠标事件等等,本文内容介绍DOM的节点查找. <script> window.onload = function(){ //children ...
- ionic+微信js-sdk集成初步融合,在子路由页引入js操作dom节点
.controller('yaoheCtrl',['$scope',function ($scope) { $scope.$watch('$viewContentLoaded',function(ev ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
- 原生JS的DOM节点操作
DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
随机推荐
- Cassandra 数据模型
Cassandra的数据模型类似于关系型数据库的模型,且提供了与SQL语言非常类似的CQL语言进行操作. 但是Cassandra的数据模型类似于多层键值对结构,与关系型数据库存在巨大差别. 本文基于: ...
- 简单JAVA爬虫51Jobs
使用Jsoup工具,它是一个HTML解析器,可以直接直接解析某个地址或者HTML文件.还可 通过Dom,CSS以及类似JQuery的操作方法操作数据. Jsoup官方文档地址:https://jsou ...
- [Python] Python基础字符串
Python的语法采用缩进的方式,一般使用四个空格,并且是大小写敏感的 字符编码 计算机只能处理数字,如果要处理文本,必须先把文本转换成数字才能处理 采用8个比特(bit)作为一个字节(byte) 一 ...
- 01-初始Java
1. 你学习编程的目的是什么?学习编程最快的办法是什么? 答:我喜欢计算机,想更多的了解计算机的原理:我认为学习最快的办法就是尝试,只有不断地在计算机上尝试编程,遇到错误, 解决错误,才能更快的学会编 ...
- 快速排序 java详解
1.快速排序简介: 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此 ...
- JS如何判断一个对象是否为空、是否有某个属性
一.js判断一个对象是否为空 方法一: let obj1 = {} let obj2 = {a:1} function empty(obj){ for (let key in obj){ return ...
- mac 上运行httpserver的问题
如果你的系统是window 我建议你安装http-server 非常好用, 如果是mac,系统自带的就有httpserver 服务,没有必要在安装 按照我说的来操作 首先 sudo apachectl ...
- Java 初级软件工程师 认证考试试卷1
Java 初级软件工程师 认证考试试卷 笔试(A卷) 考试时间150分钟 总分 100分 姓 名_______________________ 身份证号_____________ ...
- 获取子元素节点(children,childNodes)
在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等..对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除(IE6-8)里 ...
- htmlElement.style 是只读属性
document.getElementById('test').style = 'opacity:0'; 在某些机型上,比如苹果 ios 10机型上,会报错.提示 style 属性为只读属性. 建议所 ...