JavaScript 节点概述 、父节点 parentNode、子节点children、兄弟节点、创建节点 添加节点、删除节点、复制拷贝节点 ★案例★
2024-05-15 05:25:24
一般 节点至少拥有nodeType(节点类型）.nodeName(节点名称）和nodeValue(节点值）这三个基本属性
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）
- 开发中 节点操作主要操作的是元素节点
父节点 parentNode
获得里元素最近的父级节点
<body><div class="nav"><div class="jiedian">节点操作</div></div><script>var jiedian = document.querySelector('.jiedian')console.log(jiedian.parentNode);</script>
</body>
子节点 children
- 获取所有元素的子元素节点
<div><ul><li></li><li></li><li></li></ul><ol><li></li><li></li><li></li></ol></div>// 获取子节点var ul = document.querySelector('ul')var lis =ul.querySelectorAll('li') console.log(lis);// 简单方法 children 获取所有元素的子元素节点console.log(ul.children);
获取第一个和最后一个子元素节点
- firstElementChild 返回第一个子元素节点 兼容性IE9 才支持
- lastElementChild 返回最后一个子元素节点 兼容性IE9 才支持
- element.children[0] 返回第一个子元素节点 不考虑兼容问题
- element.children.length - 1 返回最后一个子元素节点 不考虑兼容问题
<div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
// 获取第一个和最后一个子元素节点console.log(ul.children[0]);console.log(ul.children[ul.children.length - 1 ]);// firstElementChild 返回第一个子元素节点 兼容性IE9 才支持console.log(ul.firstElementChild);console.log(ul.lastElementChild);
下拉菜单案例
css不展示了
js 代码
<script>var nava = document.querySelector('.nava') //获取元素console.log(nava); //打印检查var lis = nava.children; // 获取ul下li 的元素console.log(lis); //打印检查for (var i = 0;i <lis.length;i++){ //循环lis[i].onmouseover = function(){ // onmouseover鼠标经过this.children[1].style.display = 'block'}lis[i].onmouseout = function(){ // onmouseout 鼠标离开this.children[1].style.display = 'none'}}</script>
起始状态
鼠标经过时
兄弟节点
- 元素.nextElementSibling 返回当前元素下一个兄弟节点 找不到返回null 有兼容问题 IE9 以上才支持
- 元素.previousElementSibling 返回当前元素上一次兄弟节点 找不到返回 null 有兼容问题 IE9 以上才支持
- nextSibling 返回当前元素下一个兄弟节点 是包含了所有元素节点 包括换行文本节点
- previousSibling 返回当前元素上一个兄弟节点 是包含了所有元素节点 包括换行文本节点
<body><div>(●￣(ｴ)￣●)</div><span>弟</span><script>var div= document.querySelector('div')
// div.nextElementSibling 返回当前元素下一个兄弟节点 找不到返回null 有兼容问题 IE9 以上才支持console.log(div.nextElementSibling);// 返回当前元素上一次兄弟节点 找不到返回 null 有兼容问题 IE9 以上才支持console.log(div.previousElementSibling);// nextSibling 返回当前元素下一个兄弟节点 是包含了所有元素节点 包括换行文本节点 console.log(div.nextSibling);// previousSibling 返回当前元素上一个兄弟节点 是包含了所有元素节点 包括换行文本节点console.log(div.previousSibling);</script>
</body>
创建节点 添加节点
document.createElement('tagName) 方法创建 由tagName 指定的HTML元素 因为这些元素原先不存在 是根据需求动态生成的 所以也称为 动态创建元素节点
- 创建节点元素节点 createElement
- 添加节点 appendChild 将一个节点添加到指定父节点列表的末尾
<body><ul><li>111</li></ul><script>var ul = document.querySelector('ul') // 先获取元素// 创建节点元素节点 createElementvar li = document.createElement('li')console.log(li);// 添加节点 appendChild ul.appendChild(li)// 创建节点 .createElementvar lis = document.createElement('li')// 添加节点 指定元素 是在ul 第一个子元素 里的第一节点前添加ul.insertBefore(lis,ul.children[0])// 先创建节点 在添加节点</script>
</body>
简单 练习 发布留言板
<body><textarea name="" id=""> 123</textarea> <button>发布</button><ul></ul>
<script>var text = document.querySelector('textarea')var but = document.querySelector('button')var ul = document.querySelector('ul')but.onclick = function(){ //点击事件if( text.value == ''){alert('请输入内容')return false;}else{// 创建元素var li = document.createElement('li')li.innerHTML = text.value// 添加元素// ul.appendChild(li);ul.insertBefore(li,ul.children[0]) // 最新元素总在最前面显示}}
</script>
删除节点
- node.removeChild( ) 方法从DOM中删除一个子节点 返回删除的节点
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><button>删除</button><script>var ul = document.querySelector('ul')var but = document.querySelector('button')but.onclick = function(){if( ul.children .length == 0){this.disabled = true;}else{ul.removeChild( ul.children[0])}}</script>
</body>
复制节点（克隆节点）
- node.cloneNode() 方法返回调用该方法的节点的一个副本 也称为克隆节点 拷贝节点
- 如果括号参数为空 或者是false 则是浅拷贝 即 只克隆复制节点本身 不克隆里面的子节点
- 如果括号参数为 true 则是深度拷贝 会复制节点本身以及里面所有的子节点
<body><ul><li>不为所爱之人哭泣，只因从未离去。</li><li>明媚如风，轻盈似箭!</li><li>一点疼痛能让偷窥者牢记我的魅力!</li><li>风会带走你曾经存在过的证明。</li></ul><script>var ul = document.querySelector('ul')//.cloneNode() 参数为空 或者是false 则是浅拷贝 即 只克隆复制节点本身 不克隆里面的子节点var lis = ul.children[0].cloneNode(true)ul.appendChild(lis)</script>
</body>
★案例★
动态 生成表格 创建、删除单元格
<body><table cellspacing='0'><thead ><th>英雄</th><th>类型</th><th>路线</th><th>操作</th></thead><tbody></tbody>
</table><script>// 先准备好 数据var datas = [{name:'虞姬',type:'射手',route:'发育路'},{name:'甄姬',type:'法师',route:'中路'},{name:'蔡文姬',type:'辅助',route:'游走'},{name:'李白',type:'刺客',route:'打野'},{name:'李信',type:'战士',route:'对抗路'}, {name:'东皇太一',type:'坦克',route:'游走'},];var tbody = document.querySelector('tbody')for( var i = 0; i < datas.length; i++){ // 管行 tr// 创建tr行var tr = document.createElement('tr')tbody.appendChild(tr) // 行里面 创建单元格 跟数据有关系的三个单元格 单元格的数量取决于每个对象里面的属性个数 for( var k in datas[i]){ // 管列 td// 创建单元格var td = document.createElement('td')td.innerHTML = datas[i][k]tr.appendChild(td)}// 创建删除单元格var td = document.createElement('td')td.innerHTML= '<a href="javascript:;">删除</a>'tr.appendChild(td)}// 删除操作var as =document.querySelectorAll('a')for(var i = 0;i < as.length;i++){as[i].onclick = function(){// 点击a 删除 A当前所在行 node.removeChild(child)tbody.removeChild(this.parentNode.parentNode)}}</script>
</body>
</html>
点击删除
可以直接添加 属性
JavaScript 节点概述 、父节点 parentNode、子节点children、兄弟节点、创建节点 添加节点、删除节点、复制拷贝节点 ★案例★相关推荐
- JavaScript学习笔记：创建、添加与删除节点
JavaScript学习笔记:创建.添加与删除节点 文章目录 JavaScript学习笔记:创建.添加与删除节点 一.DOM对象节点类型 二.创建节点 1.创建元素节点 2.创建文本节点 3.创建属性 ...
- 089_DOM节点动态创建、添加和删除
1. 创建节点 1.1. 创建元素 document.createElement(tagName); 1.2. 创建文本 document.createTextNode("这是新文本.&qu ...
- JS中创建、添加、删除节点
createElement():创建节点 appendChild():添加节点(还有一个很相似的 inertBefore():插入节点,两个参) removeChild():删除节点 <!DOC ...
- JS DOM 编程复习笔记--父元素、子元素和兄弟元素（三）
今天我们来复习DOM中的获取父元素.子元素和兄弟元素的API,它们主要有parentNode.firstChild.firstElementChild.lastChild.lastElementChi ...
- Vue中获取当前点击元素的父元素、子元素、兄弟元素
Vue如何获取当前点击元素? 获取父元素.子元素.兄弟元素呢? 通过帮定点击事件: 例如: <button class="shanchu" @click="shan ...
- java document创建节点_javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点...
DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...
- JS----DOM节点操作：创建 ，插入，删除，复制，查找节点
摘自:https://blog.csdn.net/torrex/article/details/54376633 一.创建节点.追加节点 1.createElement(标签名)创建一个元素节点(具体 ...
- js的DOM节点操作：创建 ，插入，删除，复制，查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...
- js DOM节点操作之创建、添加、删除和克隆节点
1. 创建节点 document.createElement("tagName"):tagName为HTML标签名,创建一个标签名为tagName的元素节点. <body&g ...
最新文章
- php数字截取2位小树,数据结构-PHP 二分搜索树的层序遍历(队列实现)
- 兼容性好的CSS字体投影
- 信息论3——信道（单符号离散信道，互信息，各种熵）
- BaseExecutor.query()-创建CacheKey
- 阿里大数据分析与应用(part7)--机器学习平台PAI
- linux 设备挂载ppt,.linux 挂载各种设备.pdf
- linux中快速清空文件内容的方法
- 怎么查看ingress的规则_Prometheus PormQL语法及告警规则写法
- codeforces 711A A. Bus to Udayland(水题)
- 传统HTML页面实现模块化加载
- html5都有神马岗位,HTML5的优势和岗位要求你都知道吗
- matlab LSB算法的三种改进
- mysql同时满足升序和降序_mysql中的升序和降序以及一个字段升序和一个字段降序...
- 团队如何开会，开会准则
- 【06月21日】北上资金持股比例排名
- 熬秃了头整理的网络工程师学习笔记和心得：传闻中的OSPF到底是什么
- html.partial mvc5,.net mvc5的 完整源码(深入学习MVC非常有用)
- 实现简单的校园网自动登录
- 机器人平台搭建（一）——机器人的组成
- 怎么画流程图？手把手教你制作