<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> <script> // 获取id为test的li元素 var li = document.querySelector('#test') // 获取兄弟元素 var preBrother = li.previousElementSibling var nextBrother = li.nextElementSibling console.log(preBrother.innerHTML) // 1 console.log(nextBrother.innerHTML) // 3 </script>
注意：
children与childNodes，前者只包含元素节点，而后者为元素节点+文本节点（回车换行也算是文本节点）
而previousElementSibling与previousSibling，nextElementSibling与nextSibling也一个道理
firstChild和lastChild：firstChild等价于childNodes[0]，lastChild相当于childNodes的最后一个元素
4.DOM元素的添加与移除
添加子元素
appendChild()：将目标元素作为子元素添加到当前元素的最后面
insertBefore()：将目标元素作为子元素添加到当前元素中，位置可以自由选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> <script> // 获取ul元素 var ul = document.querySelector('ul') // 创建li元素 var liNode = document.createElement('li') liNode.innerHTML = "4" // 将创建的li元素添加到ul中(最后面) ul.appendChild(liNode) // 再创建li元素 var liNode2 = document.createElement('li') liNode2.innerHTML = "life" var li_test = document.querySelector('#test') // 将创建的li元素添加到ul中(li_test的前面) ul.insertBefore(liNode2,li_test) </script>
运行结果
<ul> <li>1</li> <li>life</li> <li>2</li> <li>3</li> <li>4</li> </ul>
删除子元素和替换子元素
removeChild()：删除子元素
replaceChild()：替换子元素
语法：parent.removeChild(child)
语法：parent.removeChild(替换的元素, 被替换的元素)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{padding: 0;margin: 0;} </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> <script> // 获取ul元素 var ul = document.querySelector('ul') // 获取要删除的li元素 var li_test = document.querySelector('#test') // 删除子元素 ul.removeChild(li_test) // 获取要替换的li元素 var li_replace = document.querySelector('#replace') // 创建要替换的元素 var newLI = document.createElement('li') newLI.innerHTML = "replace li tag" // 替换元素 ul.replaceChild(newLI,li_replace) </script>
运行结果：
<ul> <li>1</li> <li>replace li tag</li> </ul>