一般 节点至少拥有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 兄弟节点 创建节点 添加节点 删除节点 复制拷贝节点 ★案例★
