• 当前标签:元素节点

程序开发 DOM节点 - 元素节点

<ul>         <li>HTML5</li>         <li>CSS3</li>         <li>JavaScript</li>         <li>Java</li>     </ul> var ul = document.getElementsByTagName('ul')[0] var li2 = ul.childNodes[3] // 获取子节点 包含文本节点 会受到HTML文档中空白字符的干扰 var li2 = ul.children[1] // children获取子元素/标签 不包含空白字符 console.log(li2) alert(li2.outerHTML) // 获取包含本身在内的所有html代码 document.write('123') document.write('456') document.writeln('123') document.writeln('456') document.write('<pre>') for(var k in li2){     document.writeln(k)     // 可以在</body>之前 向HTML文档或当前页面写入新的文本 } document.write('</pre>') alert(li2.previousElementSibling.outerHTML) // previousElementSibling 属性返回同一树层级中 // 指定节点的前一个节点 // 被返回的节点以Node 对象的形式返回 alert(li2.nextElementSibling.outerHTML) // nextElementSibling属性返回同一树层级中       alert(li2.childElementCount) // 子元素的数量  console.log(ul) alert(ul.firstChild.nodeName) alert(ul.lastChild.nodeName) // 返回第一个或最后一个节点 alert(ul.firstElementChild.outerHTML) alert(ul.lastElementChild.outerHTML) // 返回第一个或最后一个元素 var newli =document.createElement('li') // 创建一个新的标签元素 newli.innerText = 'PHP' ul.appendChild(newli) // 拼接子元素 添加到最后一个子节点之后 var removed = ul.removeChild(ul.firstElementChild) // removeChild 移除子节点 ul.appendChild(removed) ul.replaceChild(removed,newli) // 替换子节点 ul.insertBefore(removed,ul.firstChild) // insertBefore() 方法在您指定的已有子节点之前插入新的子节点。 // ul.insertBefore('插入内容','在...节点之前') ul.insertAdjacentText('beforeBegin','外面的外面') // 插入文本 // beforeBegin 在...开始之前 ul.insertAdjacentHTML('afterBegin','<li>里面的前面</li>') // afterBegin 在...里面的前面 ul.insertAdjacentHTML('beforeEnd','<li>里面的后面</li>') // beforeEnd 在...里面的后面 ul.insertAdjacentText('afterEnd','外面的后面') // afterEnd 在...外面的后面 ul.insertAdjacentElement() // 插入标签元素 // ul.insertAdjacentHTML() // 插入代码

2017-07-14 21:37:23 77 0 0
阅读详情
  • 1
前往