05-JS使用过的函数 41-50

41、parentNode

parentNode 属性可返回某节点的父节点。

如果指定的节点没有父节点则返回 null 。

<div>
    <p> <span id="sun">太阳</span>当空照, 花儿对我笑, 小鸟说</p>
</div>

var sun = document.getElementById('sun');
// 获取 span 标签的父元素 p标签
var p = sun.parentNode;
console.dir(p);
console.log(p.innerText);
console.log(p.innerHTML);

// 获取 p 标签的父元素 div
var div = p.parentNode; // sun.parentNode.parentNode
console.log(sun.parentNode.parentNode.parentNode); // body

以上例程会输出：

 42、nextElementSibling

nextElementSibling 属性返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。

nextSibling 属性与 nextElementSibling 属性的差别：

• nextSibling 属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；
• nextElementSibling 属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；

nextElementSibling属性为只读属性。

提示: 使用 previousElementSibling 属性返回指定元素的前一个元素。

提示: 使用 children 属性返回指定元素的任何子元素。

<ul>
    <li>1</li>
    <li>2</li>
    <li id="item">3</li>
    <li>4</li>
    <li>5</li>
</ul>

var item = document.getElementById('item');
// 1. 获取下一个兄弟元素节点 nextElementSibling; Sibling 兄弟姐妹
console.log(item.nextElementSibling);

// 2. 获取对应元素后的兄弟节点 nextSibling; 
// ps: 返回元素节点后的兄弟节点(包含 文本节点(换行 空格) 注释节点)
// 不实用, 了解即可
console.log(item.nextSibling);

// 3.previousElementSibling // 获取前一个兄弟元素节点
console.log(item.previousElementSibling);
// 4.previousSibling 获取对应元素前兄弟节点 . 不实用
console.log(item.previousSibling);

以上例程会输出：

 43、nextSibling

nextSibling 属性可返回某个元素之后紧跟的节点（处于同一树层级中）。

返回节点以节点对象返回。

44、 previousElementSibling

previousElementSibling 属性返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。

previousSibling 属性与 previousElementSibling 属性的差别：

• previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
• previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）；

previousElementSibling 属性为只读属性。

提示: 使用 nextElementSibling 属性返回指定元素的下一个兄弟元素。

提示: 使用 children 属性返回指定元素的任何子元素。

45、previousSibling

previousSibling 属性可返回某节点之前紧跟的节点（处于同一树层级）

返回节点以节点对象返回。

46、firstElementChild

firstElementChild 属性返回指定元素的第一个子元素。

firstElementChild 属性与 firstChild, 属性的区别在于 firstChild 返回第一个子节点作为元素节点，包含文本节点或注释节点（取决于哪个是第一个），而 firstElementChild 返回第一个子节点作为元素节点（忽略文本和注释节点）。

该属性是只读的。

提示：使用 children 属性返回指定元素的任何子元素。

提示：要返回指定元素的最后一个子元素，请使用 lastElementChild 属性。

<ul>
    <li>1</li>
    <li>2</li>
    <li id="item">3</li>
    <li>4</li>
    <li>5</li>
</ul>

var ul = document.getElementsByTagName('ul')[0];
console.dir(ul);
// console.log(ul.firstChild); // 不实用
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);

 

 47、lastElementChild

lastElementChild 属性返回指定元素的最后一个子元素。

lastElementChild 属性与 lastChild 属性的区别在于 lastChild 返回最后一个子节点作为元素节点，包含文本节点或注释节点（取决于哪个是最后一个），而 lastElementChild 返回最后一个子节点作为元素节点（忽略文本和注释节点）。

该属性是只读的。

提示：使用 children 属性返回指定元素的任何子元素。

提示：要返回指定元素的第一个子元素，请使用 firstElementChild 属性。

48、createElement

createElement 是 JavaScript 中的一个方法，用于创建一个 HTML 元素。该方法接受一个参数，即要创建的元素的标签名，例如：

const newDiv = document.createElement('div');

这个代码会创建一个空的 div 元素，并将其存储在 newDiv 变量中。可以通过其他 DOM 操作方法给该元素添加子元素、修改属性等。

49、removeChild&&remove

removeChild() 方法可从子节点列表中删除某个节点。

如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

<ul>
    <li>第1个li</li>
    <li>第2个li</li>
    <li>第3个li</li>
    <li>第4个li</li>
    <li>第5个li</li>
    <li>第6个li</li>
    <li>第7个li</li>
</ul>

// 删除节点
// removeChild('子节点'); 调用者是这个子节点的父节点
var ul = document.getElementsByTagName('ul')[0];
ul.removeChild(ul.children[2]);

// remove() 调用者是自己
var li = document.getElementsByTagName('li')[0];
li.remove();

以上例程会输出：

 50、replaceChild

replaceChild() 方法可将某个子节点替换为另一个。

新节点可以是文本中已存在的，或者是你新创建的。

<div class="header">
    <p>日照香炉生紫烟</p>
    <p>遥看瀑布挂前川</p>

    <span>我</span>
</div>

// 替换节点方法: replaceChild('要替换的内容', '被替换的内容'); 调用这是父节点
var header = document.getElementsByClassName('header')[0];

var newP = document.createElement('p');
newP.innerHTML = '飞流直下三千尺'
// 取 span header.children[2]  header.lastElementChild
// header.replaceChild(newP, header.children[2]);
header.replaceChild(newP, header.lastElementChild);

以上例程会输出：