父节点操作
// 1. 父节点 parentNode var erweima = document.querySelector('.erweima'); // var box = document.querySelector('.box'); // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null console.log(erweima.parentNode);
子节点的操作
// 2. children 获取所有的子元素节点 也是我们实际开发常用的 console.log(ul.children); console.log(ul.children[0]); console.log(ul.children[1]); console.log(ul.children[2]);
子节点的第一个元素和最后一个元素
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素 console.log(ol.children[0]); console.log(ol.children[ol.children.length - 1]);
创建和添加节点
想要添加节点，就必须先创建一个节点，之后将结点追加到开头或者结尾就可以了，注意的是追加到结尾的写法，还有就是需要首先将他的父节点获取过来。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li>你好</li> </ul> </body> <script> // 创建元素 var li = document.createElement('li'); // 添加到后面 var ul = document.querySelector('ul') ; ul.appendChild(li) ; // 追加到最前面 var lili = document.createElement('li'); ul.insertBefore(lili , ul.children[0]) ; </script> </html>
简易版发布留言案例
这个的核心就是创建li和追加li，就是上面的具体化一下，还有就是将文本框里面的文字内容添加给li。innnerHTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { padding: 100px; } textarea { width: 200px; height: 100px; border: 1px solid pink; outline: none; resize: none; } ul { margin-top: 50px; } li { width: 300px; padding: 5px; background-color: rgb(245, 209, 243); color: red; font-size: 14px; margin: 15px 0; } </style> </head> <body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> <script> // 获取元素 var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var ul = document.querySelector('ul'); // 注册 + 函数 btn.onclick = function () { if (text.value == '') { alert('你没有输入内容'); } else { var li = document.createElement('li'); li.innerHTML = text.value ; // ul.appendChild(li); ul.insertBefore(li , ul.children[0]) ; } } </script> </body> </html>
删除留言案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { padding: 100px; } textarea { width: 200px; height: 100px; border: 1px solid pink; outline: none; resize: none; } ul { margin-top: 50px; } li { width: 300px; padding: 5px; background-color: rgb(245, 209, 243); color: red; font-size: 14px; margin: 15px 0; } li a { float: right; text-decoration: none; color: red; } </style> </head> <body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> <script> // 获取元素 var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var ul = document.querySelector('ul'); // 注册 + 函数 btn.onclick = function () { if (text.value == '') { alert('你没有输入内容'); } else { var li = document.createElement('li'); // 在文本域内容去过来的时候，加一个a链接 li.innerHTML = text.value + "<a href = 'javascrip:;'>删除</a>"; // ul.appendChild(li); ul.insertBefore(li , ul.children[0]) ; // 删除元素 - 删除的是当前连接的父亲 var as = document.querySelectorAll('a'); // 给每一个小a都要绑定事件 for ( var i = 0 ; i < as.length ; i ++ ) { as[i].onclick = function () { ul.removeChild(this.parentNode) ; } } } } </script> </body> </html>
克隆标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li>1</li> <li></li> <li></li> </ul> <script> var ul = document.querySelector('ul') ; // 克隆标签 待克隆的.cloneNode(true) ; var lili = ul.children[0].cloneNode(true); // 追加到后面 ul.appendChild(lili) ; </script> </body> </html>
