html 追加子元素,Dom元素子父节点操作、Dom元素创建追加

Dom元素子父节点操作

通过父元素获取子元素

var nav=document.querySelector("#nav");

console.log(nav.childElementCount);

console.log(nav.childNodes);

childElementCount表示当前元素 子元素的个数

childNodes表示子节点，包含文本和元素，返回的是Nodelist集合，返回值则包含length属性

nodeType返回的是当前节点的类型，当返回值是1时，表示元素，当返回值为3时，表示字符

nodeName返回的是当前节点名称

console.log(nav.childNodes[1].nodeName);按数组的方式取节点，后面可以是nodeName、nodeType，也可以是nodeValue

对于标签元素和表单元素标签，nodeValue值均为null,他们的值在innerHTML、innerText或者value中，文本的节点值(nodeValue)为自身文本。

获取当前节点的下一个同胞兄弟元素：nextElementsibling

例：console.log(nav.childNodes[2].nextElementsibling);

-获取当前节点的上一个同胞兄弟元素：previousElementSibling

例：console.log(nav.childNodes[2].previousElementSibling);

nextSibling或者PreviousSibling获取到的可能是字符

直接获取父元素里面的子集

firstElementChild表示当前元素里面的第一个子元素

例：console.log(nav.firstElementChild);

lastElementChild表示当前元素里面的最后一个子元素

例:console.log(nav. lastElementChild);

firstChild表示第一个节点，但第一个节点可能是元素，也可能是字符。lastChild同理

通过children获取父元素里的子集

通过child返回的是HTML collection元素集合，以数组的方式取值

例：console.log(nav.children[0]);

通过子元素获取父元素

var menu=document.getElementById("menu");

console.log(menu.parentNode);

console.log(menu.parentElement);

通过parentNode或者parentElement获取父元素的值

Dom元素创建

var block=document.getElementsByClassName("block")[0];

var dom=document.createElement("div");

console.log(dom);

block.appendChild(div);//追加在当前元素的内容之后

通过createElement创建新的元素，并用appendChild将创建好的新元素追加到制定元素内容的后面

写一个追加到当前元素之前的方法

例：

beforechild(dom);

function beforechild(val){

block.insertBefore(val,block,firstchild);

}

标签：console,log,Dom,元素,nav,子父,节点,block

来源： https://blog.csdn.net/weixin_44871519/article/details/98796371