js dom

Posted 2021-01-11 shangxr

Js dom

元素节点:

分类：元素节点，属性节点，文本节点，注释节点

nodeName nodeValue nodeType

 元素节点  标签名 null  1

 属性节点  属性名 属性值  2

 文本节点  #text 文本值      3

 注释节点#comment 注释内容  8

获取节点所有的子节点： 节点.childNodes

获取节点所有属性节点： 节点.attributes

元素节点的4种获取方式

document.getElementById(传入id名);

document.getElementsByClassName(传入样式名x)[0];表示第一个样式名为x的标签

document.getElementsByTagName(传入标签名y)[0];表示第一个标签名为y的标签

Document.getElementsByName(传入name属性名z)[0];表示第一个name属性名为z的标签

获取的所有子节点返回的是一个数组：

Demo：

<div id="box" class="div" style="width: 30px;height: 50px;" name="nana">我是一个文本节 点<!--我是注释节点--><span name="nana">我是一个span标签</span></div>

var oDiv = document.getElementById("box");

console.log( oDiv.childNodes );

var oDivChilds = oDiv.childNodes;

console.log( oDivChilds[0].nodeName,oDivChilds[0].nodeValue,oDivChilds[0].nodeType );

console.log( oDivChilds[1].nodeName,oDivChilds[1].nodeValue,oDivChilds[1].nodeType );

节点的层次关系：

var oDiv = $("box");

console.log( oDiv.innerText );

console.log( oDiv.innerhtml);

innerText和innerHTML的区别：

前者是获取标签内的内容，把标签里的标签视为内容读出，包括标签里的标签的内 容。

或者是获取标签的内容，把标签里的标签视为内容读出；

console.log( oDiv.firstChild );获取标签内的第一个子节点

注意：第一个节点不一定是标签内的元素，还有可能为回车！！

console.log( oDiv.lastChild );获取标签内的最后一个子节点

console.log( oDiv.parentNode );获取标签的父节点

兄弟节点：

console.log( oDiv.previousSibling );获取前一个兄弟节点

console.log( oDiv.nextSibling);获取下一个兄弟节点

console.log( oDiv.owerDocument );获取根节点

 创建元素节点：

document.creatElement(“div”);创建一个div标签

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

设置样式：

oDiv.className = "box";

oDiv.style.backgroundColor = randomColor();

操作元素节点：

document.createElement();创建元素节点

添加到父节点：

父节点.appendChild(子节点);

父节点.insertBefore(新节点，旧节点);在旧节点的父元素下的旧节点之前添加节点

父节点.removeChild(子节点);删除节点

父节点.replaceChild(新节点,旧节点);替换节点

父节点.cloneNode();克隆节点，不克隆子节点；

父节点.cloneNode(true);克隆节点，克隆子节点；

document.creatTextNode(“文本值”);创建文本节点；