织梦网站识别百度权重什么意思
如今，复杂，大量标记的Web应用程序已成为常态。 像jQuery这样的易用性，跨浏览器兼容性和各种功能的库在即时处理HTML时可以提供巨大帮助。 因此，难怪很多开发人员选择使用这样的库而不是使用本来就存在问题的本机DOM API。 尽管浏览器之间的差异仍然是一个问题，但与jQuery真正开始兴起的5或6年前相比，今天的DOM的状态要好得多。
在这篇文章中，我将讨论并演示许多可用于操作HTML的不同DOM功能，并特别关注父，子和同级节点关系。
在结论中，我将介绍浏览器的支持，但请记住，由于使用此类本机功能存在错误和不一致，因此像jQuery这样的库仍通常被视为一个不错的选择。
计数子节点
让我们使用以下HTML，我将在本文中以各种形式进行重新讨论：
<body><ul id="myList"><li>Example one</li><li>Example two</li><li>Example three</li><li>Example four</li><li>Example five</li><li>Example Six</li></ul>
</body> 如果我想计算<ul>元素中有多少个元素，可以通过两种方法进行。
var myList = document.getElementById('myList');console.log(myList.children.length); // 6
console.log(myList.childElementCount); // 6见笔计数子元素：儿童及childElementCount由SitePoint（ @SitePoint上） CodePen 。
最后两行中的日志产生相同的结果，但是每条日志使用不同的技术。 在第一种情况下，我正在使用children属性。 此只读属性返回要查询的元素内的HTML元素的集合，而我正在使用length属性来查找集合中有多少个HTML元素。
在第二个示例中，我正在使用childElementCount ，我认为这是一种更清洁且可能更易于维护的方式（换句话说，稍后再访问此代码，您可能会很容易确定出childElementCount在做什么）。
有趣的是，我也可以使用childNodes.length （而不是children.length ），但是请注意结果：
var myList = document.getElementById('myList');
console.log(myList.childNodes.length); // 13请参阅CodePen上的SitePoint （ @SitePoint ） 带有childNodes.length的笔计数子节点 。
这将返回13因为childNodes是所有节点（包括空格节点）的集合-因此，如果您需要区分所有子节点和所有元素节点的能力，请记住这一点。
检查子节点的存在
我还可以使用hasChildNodes()方法来检查给定元素是否具有任何子节点。 此方法返回一个布尔值以指示它是否具有子节点：
var myList = document.getElementById('myList');
console.log(myList.hasChildNodes()); // true请参阅CodePen上的SitePoint （ @SitePoint ）的Pen hasChildNodes（） 。
我知道我的列表有子节点，但是我可以更改HTML以删除列表中的元素，因此我的HTML如下所示：
<body><ul id="myList"></ul>
</body> 如果再次运行hasChildNodes() ，则结果如下：
console.log(myList.hasChildNodes()); // true请参阅CodePen上的SitePoint （ @SitePoint ）在空白元素上带有空白的Pen hasChildNodes（） 。
注意它仍然记录为true 。 尽管列表不包含任何元素，但它确实包含空格，这是节点的有效类型。 此特定方法通常处理节点，而不仅仅是元素节点。 为了确保hasChildNodes()返回false ，我的HTML必须如下所示：
<body><ul id="myList"></ul>
</body>现在，我从日志中得到了预期的结果：
console.log(myList.hasChildNodes()); // false请参阅CodePen上的SitePoint （ @SitePoint ）上没有空白的空白元素上的Pen hasChildNodes（） 。
当然，如果我知道自己正在处理潜在的空白，则可以先检查子节点是否存在，然后使用nodeType属性确定其中是否有任何元素节点。
添加和删除子元素
我们可以使用一些技术来从DOM中添加或删除节点。 最常与createElement()结合使用的最熟悉的方法是appendChild()方法：
var myEl = document.createElement('div');
document.body.appendChild(myEl); 在这种情况下，我将使用createElement()创建<div> ，然后将其附加到正文中。 非常简单，很可能您以前使用过该技术。
但是，除了插入新创建的元素外，我还可以使用appendChild()作为移动现有元素的简单方法。 假设我有以下HTML：
<div id="c"><ul id="myList"><li>Example one</li><li>Example two</li><li>Example three</li><li>Example four</li><li>Example five</li><li>Example Six</li></ul><p>Example text</p>
</div>我可以使用以下代码更改列表的位置：
var myList = document.getElementById('myList'),container = document.getElementById('c');container.appendChild(myList);生成的DOM如下所示：
<div id="c"><p>Example text</p><ul id="myList"><li>Example one</li><li>Example two</li><li>Example three</li><li>Example four</li><li>Example five</li><li>Example Six</li></ul>
</div>请参见使用appendChild（）通过PenPen上的SitePoint（ @SitePoint ） 更改元素位置的笔 。
请注意，整个列表已从其位置删除（在段落上方），然后追加到正文的末尾，并将其放在段落下方。 因此，尽管您通常会看到appendChild()用于添加使用createElement()方法生成的元素，但这也是将现有元素移动到页面上其他位置的一种简便方法。
我还可以使用removeChild()从DOM中完全删除一个孩子。 这是我可以从之前的HTML代码段中删除相同列表元素的方法：
var myList = document.getElementById('myList'),container = document.getElementById('c');container.removeChild(myList);请参阅CodePen上的SitePoint （ @SitePoint ） 使用removeChild（）的笔。
现在，该元素已删除。 removeChild()方法返回已删除的元素，因此如果需要，可以将其存储在某个地方以备后用：
var myOldChild = document.body.removeChild(myList);
document.body.appendChild(myOldChild);请参见使用removeChild（）在Pen上使用 SitePoint（ @SitePoint ） 移动元素的笔 。
还有ChildNode.remove()方法，这是规范中的新功能：
var myList = document.getElementById('myList');
myList.remove();请参阅CodePen上的SitePoint （ @SitePoint ） 使用childNode.remove（）的笔。
此方法不返回已删除的对象，并且在Internet Explorer（仅Edge）中不起作用。 我还应该注意，这两种删除技术都将针对文本节点以及元素。
替换子元素
我可以用新孩子替换现有孩子，无论该新孩子已经存在于某个地方，还是我从头开始创建它。 这是HTML：
<p id="par">Example Text</p>然后是JavaScript：
var myPar = document.getElementById('par'),myDiv = document.createElement('div');myDiv.className = 'example';
myDiv.appendChild(document.createTextNode('New element text'));
document.body.replaceChild(myDiv, myPar);请参阅CodePen上的SitePoint （ @SitePoint ） 使用replaceChild（）的笔。
在这里，我正在创建元素，在文本节点上添加createTextNode() ，然后将其插入到页面中以代替段落元素。 然后，将上一个段落元素替换为以下HTML：
<div class="example">New element text</div> 如您所见， replaceChild()方法replaceChild()两个参数：新元素和要替换的旧元素。
我还可以使用此方法将现有元素从其位置移开，并将其替换为新元素。 查看以下HTML：
<p id="par1">Example text 1</p>
<p id="par2">Example text 2</p>
<p id="par3">Example text 3</p>我可以使用以下代码用第一段替换第三段：
var myPar1 = document.getElementById('par1'),myPar3 = document.getElementById('par3');document.body.replaceChild(myPar1, myPar3);现在，生成的DOM将如下所示：
<p id="par2">Example text 2</p>
<p id="par1">Example text 1</p>参见使用 CodePen上的SitePoint （ @SitePoint ）将Pen 用replaceChild（）交换一个元素 。
定位特定的子元素
有几种针对特定元素的方法。 如前所述，我可以使用children集合或childNodes属性，然后从那里开始工作。 但是，让我们看看其他一些选择。
firstElementChild和lastElementChild属性完全按照其名称的建议进行操作：它们将指定父对象的第一个和最后一个子元素作为目标。 让我们回到我们的HTML列表：
<body><ul id="myList"><li>Example one</li><li>Example two</li><li>Example three</li><li>Example four</li><li>Example five</li><li>Example Six</li></ul>
</body>我可以使用以下内容定位此列表中的第一个或最后一个元素：
var myList = document.getElementById('myList');
console.log(myList.firstElementChild.innerHTML); // "Example one"
console.log(myList.lastElementChild.innerHTML); // "Example six"见笔使用firstElementChild和lastElementChild由SitePoint（ @SitePoint上） CodePen 。
如果我要定位第一个或最后一个以外的子元素，则也可以使用previousElementSibling和nextElementSibling属性。 这些可以与firstElementChild和lastElementChild结合使用：
var myList = document.getElementById('myList');
console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Example two"
console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Example five"请参阅CodePen 上的SitePoint（ @SitePoint ） 使用nextElementSibling和previousElementSibling的钢笔 。
也有相似的firstChild ， lastChild ， previousSibling和nextSibling属性，但是这些属性处理所有类型的节点，而不仅仅是元素节点。 在许多情况下，特定于元素的属性将更加有用，因为它们仅针对元素节点。
将内容注入DOM
我已经研究了将元素添加到DOM的方法。 让我们解决一个类似的概念，并查看一些功能，这些功能可让您对插入内容的位置进行更细粒度的控制。
首先，有一个简单的insertBefore()方法。 这个工作就像replaceChild() ，带有两个参数，它将与新创建的元素或现有的元素一起使用。 让我们使用以下HTML：
<div id="c"><ul id="myList"><li>Example one</li><li>Example two</li><li>Example three</li><li>Example four</li><li>Example five</li><li>Example Six</li></ul><p id="par">Example Paragraph</p>
</div>注意段落元素。 我将删除该段，然后将其插入列表之前，所有操作全部完成：
var myList = document.getElementById('myList'),container = document.getElementBy('c'),myPar = document.getElementById('par');container.insertBefore(myPar, myList);请参阅CodePen上的SitePoint （ @SitePoint ） 使用insertBefore（）的钢笔 。
生成的HTML将在列表之前而不是之后具有段落元素，这是将元素从其现有位置移动到页面中其他位置的另一种方法：
<div id="c"><p id="par">Example Paragraph</p><ul id="myList"><li>Example one</li><li>Example two</li><li>Example three</li><li>Example four</li><li>Example five</li><li>Example Six</li></ul>
</div> 与replaceChild() ， insertBefore()接受两个参数：要添加的元素和我们要在其之前添加第一个参数中指定的元素的元素。
该方法非常简单。 现在，让我们使用一种功能更强大的方法来更精确地进行这些插入： insertAdjacentHTML()方法。
var myEl = document.getElementById('el');
myEl.insertAdjacentHTML('beforebegin', '<p>New element</p>');上面的代码将在目标元素之前插入指定的内容字符串（在这种情况下，在列表之前）。 第二个参数是要插入的HTML字符串（也可以是没有HTML标签的文本）。 第一个参数（也表示为字符串）必须是以下四个值之一：
- 'beforebegin'–在指定元素之前插入字符串
- 'afterbegin'–在指定元素的第一个子元素之前插入字符串
- 'beforeend'–在指定元素的最后一个子元素之后插入字符串
- 'afterend'–在指定元素之后插入字符串
为了更容易理解每个值代表什么，请查看以下代码片段中的HTML注释。 假设#el div是目标元素，则每个注释都指示HTML将与第一个参数的指定值一起到达的位置：
<!-- beforebegin -->
<div id="el"><!-- afterbegin --><p>Some example text</p><!-- beforeend -->
</div>
<!-- afterend -->那应该很清楚地说明每个可能的值对内容字符串的作用。
请参阅CodePen上的SitePoint（ @SitePoint ） 使用insertAdjacentHTML（）的钢笔 。
浏览器支持
在讨论DOM中的任何内容时，浏览器支持始终是一个很大的因素。 除了错误，下面是对这些功能的支持程度的简要说明。
所有浏览器 （包括旧版本的IE）都支持以下功能：
- 子节点
- hasChildNodes（）
- appendChild（）
- removeChild（）
- replaceChild（）
- createTextNode（）
- 以前的兄弟姐妹
- nextSibling
- insertBefore（）
- insertAdjacentHTML（）
IE9 +和所有其他浏览器均支持以下功能：
- 孩子们
- childElementCount
- firstElementChild
- lastElementChild
- previousElementSibling
- nextElementSibling
剩下的仅是Node.remove（）方法，如上所述，该方法在Internet Explorer中不支持，但已添加到Microsoft的新Edge浏览器中。
因此，总的来说，浏览器对这些DOM功能的支持非常出色。 当然，会存在错误和互操作性问题，因此，如果您决定大量使用其中的任何一个，请确保进行彻底的测试。
结论
理想情况下，JavaScript语言和本机DOM API应该足以允许我们轻松地以跨浏览器的方式构建东西。 最终，我认为我们会做到这一点，但是与此同时，jQuery之类的工具将继续满足这一需求。
在尝试使用本机DOM脚本动态处理HTML时，请随意评论您发现或使用的任何相关功能。
From: https://www.sitepoint.com/dom-tips-techniques-parent-child-siblings/