javascript中节点操作、节点属性、节点获取、创建节点、删除节点、克隆节点
节点操作
节点操作实际是利用DOM树把节点划分为不同的层次关系,常见父子兄弟级关系
节点属性:
节点一般有三个属性:nodeType节点类型(其中元素节点值为1,属性节点值为2,文本节点值为3)、nodeName节点名称、nodeValue节点值
父级节点和父级元素获取:
.parentNode父级节点、.parentElement父级元素;找不到就返回null:
<body><div><div class="box"></div></div><script>var box = document.getElementsByClassName('box')[0];var boxFather = box.parentNode;console.dir(boxFather);</script></body>
子级节点
.childNodes:得到的是一个节点集合,包含元素节点、文本节点;这样会带来不便的麻烦,因此出现了:仅可以获取所有元素节点的方法:.children、获取第一个子级节点的方法:.firstChild、获取第一个子级元素节点的方法:.firstElementChild、获取最后一个子级节点的方法:.lastChild、获取最后一个子级元素节点:lastElementChild
<body><ul><li>1</li><li class='lis'>2</li><li>3</li></ul><script>var ulList = document.querySelector('ul');var listLi = ulList.childNodes;var Li = ulList.children;console.log(listLi); //NodeList(7) [text, li, text, li.lis, text, li, text]console.log(Li); //HTMLCollection(3) [li, li.lis, li]console.log(listLi[0].nodeType); //3表示文本console.log(listLi[1].nodeType); //1元素(标签)</script></body>
兄弟节点:
返回当前元素的下一个兄弟节点:node.nextSibling、返回上一个兄弟节点:node.previousSibling、返回下一个元素节点:node.nextElementSibling、返回上一个元素节点:node.previousElementSibling
<body><ul><li>1</li><li class='lis'>2</li><li>3</li></ul><ul><li>4</li><li class='lis'>5</li><li>6</li></ul><script>var ulList = document.querySelector('ul');console.log(ulList.nextSibling); //#text,获取下一个节点console.log(ulList.nextElementSibling); //<ul>...</ul>,获取下一个元素节点console.log(ulList.previousSibling); //#text,获取上一个节点console.log(ulList.previousElementSibling); //null,获取上一个元素节点</script></body>
创建节点:
1.创建元素节点:document.createElement(‘标签’); 2.将创建的元素节点追加到某个节点:父级节点.appendChild(创建的元素节点),此方法是在后面添加的元素节点,如果想要在某个节点前面添加元素节点,那么可以使用:父级节点.insertBefore(创建的元素节点,某个节点);
<body><ul><li>1</li></ul><script>var ulList = document.querySelector('ul');var liChild = document.createElement('li');liChild.innerHTML = 'hello';// ulList.appendChild(liChild);ulList.insertBefore(liChild, ulList.children[0]);</script></body>
删除节点:
node.removeChild()用来删除node的子元素,括号里传入要删除的子元素;
克隆节点:
node.cloneNode()用来克隆node,如果括号里面传入false或者不传参数,则只克隆标签,不克隆内容;若括号里传入true则和内容一起克隆。
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海
javascript中节点操作、节点属性、节点获取、创建节点、删除节点、克隆节点相关推荐
- JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
- JavaScript中BOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
- JavaScript 中遍历对象的属性
原文链接 JavaScript 中遍历对象的属性 参考 JavaScript中的属性:如何遍历属性 <JavaScript 高级程序设计> 概述 遍历 JavaScript 对象中的属性没 ...
- JavaScript 中遍历对象的属性 1
JavaScript 中遍历对象的属性 原文链接 JavaScript 中遍历对象的属性 参考 JavaScript中的属性:如何遍历属性 <JavaScript 高级程序设计> 概述 遍 ...
- JavaScript中函数的length属性
JavaScript中函数的length属性 length是函数的一个属性 函数的length是js函数对象的一个属性,函数的length代表形参的个数(即有多少必传参数) 形参的数量不包括不包括剩余 ...
- JavaScript中的可枚举属性与不可枚举属性
在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for-in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...
- jq添加新节点赋予class属性并获取该对象
声明 : 该文的编写纯属个人试验所得 ,供网友借鉴.如有错误,请留言!!! 首先,添加新节点的class属性不能运用click.change等事件,但能通过类名选择器获取该对象的value值. &l ...
- js DOM节点操作之创建、添加、删除和克隆节点
1. 创建节点 document.createElement("tagName"):tagName为HTML标签名,创建一个标签名为tagName的元素节点. <body&g ...
- js 节点相关内容介绍 创建、删除、复制节点
目录 1.节点介绍 2.案例-下拉菜单 3.兄弟节点 4.创建节点 5.案例-简单发布留言 6.删除节点 7.复制节点(克隆节点) 1.节点介绍 1.为什么要学习节点 可以利用父子兄节点关系获取元素 ...
- javascript中的操作元素
操作元素 JavaScript的DOM操作可以改变网页内容,结构和样式,我们可以利用DOM操作元素来改变元素里面的内容.属性等 改变元素内容 element.innerText 从起始位置到种植位 ...
最新文章
- 有关GetPrivateProfileString的使用方法
- UVA11624 Fire!(bfs)
- textview html字体颜色变粗,安卓使用Html实现textview部分字体变色加粗的效果(使用Html实现多种字体效果)-Go语言中文社区...
- 离开宁静的农村,走进喧嚣的城市:搬家!
- [Swift]LeetCode873. 最长的斐波那契子序列的长度 | Length of Longest Fibonacci Subsequence...
- 【收藏】HBase源码 | HBase2.x源码导入IDEA并开启DEBUG调试
- extern 全局变量在不同的文件使用方法(static)
- android 屏蔽快速点击,Android-如何防止用户过快频繁点击按钮(一)
- # 定义四边形_对特殊平行四边形核心梳理,拓展提升思维
- C#.Net工作笔记011---c# visual studio中的assembly理解
- 使用 IntraWeb (14) - 基本控件之 TIWHRule、TIWRectangle
- C#+AE 地图制图(二)
- 初识热仿真的一些记录001
- 3D画图软件测试自学,3D版的“画图”!Win10Paint3D上手体验
- 一博商业进销存管理系统 v2008 怎么用
- AssertionError: Torch not compiled with CUDA enabled
- NET 模拟Htpp请求
- android pdf转jpg格式,在Android中将图片转换为PDF
- java url参数转map_url参数和map之间的转换
- 实践Python控制NI SMU PXIe-4143
热门文章
- linux tcp压测工具,wrktcp: 支持tcp协议压测的wrk工具,全配置不依赖lua
- Dropzone插件的使用(从前台到后台完整流程)
- 软件日志(系统日志)
- 如何下载.swf文件
- Mac如何编辑视频 imovie使用教程攻略
- 【转载】什么是数字取证(Digital forensics)?
- MAR DASCTF 2021 baby_flask
- orc表导致hiveserver2内存暴涨问题分析
- php鼠标移动脚本,按键精灵鼠标移动脚本–eq
- xshell和xftp6提示“要继续使用此程序,您必须应用最新的更新或使用新版本”