文档中所有的内容都是节点,节点是dom的最小组成单元
dom节点的基本属性
节点: nodeType nodeName nodeValue
元素节点 1 元素名 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本内容
<body>
<ul id="list">
<li id="con">列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
<script>
var oUl = document.getElementById("list");//元素节点对象
var oLi = document.getElementById("con");//元素节点对象
var oAttr = oUl.getAttributeNode("id");//属性节点对象
// alert(oAttr)
// console.log(oAttr.nodeType);//2
// console.log(oAttr.nodeName);//id 属性节点的名称 属性名
// console.log(oAttr.nodeValue);//list 属性节点的值 属性值
// alert(oLi.firstChild);//文本节点
console.log(oLi.firstChild.nodeType);//3 文本节点
console.log(oLi.firstChild.nodeName);//#text 文本节点
console.log(oLi.firstChild.nodeValue);//列表1
// alert(oUl)
// console.log(oUl.nodeType);// 1 节点类型
// console.log(oUl.nodeName);// UL 节点名称
// console.log(oUl.nodeValue);// null 节点值
</script>
1.节点查找
父子之间(parentNode)
<body>
<ul id="list">
<li id="con">列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
<script>
var oUl = document.getElementById("list");
console.log(oUl.firstChild);//ul里第一个子节点 可能会遇到文本节点
console.log(oUl.firstElementChild);//ul的第一个元素节点
console.log(oUl.lastChild);//ul里最后一个子节点 可能会遇到文本节点
console.log(oUl.lastElementChild);//ul的最后一个元素节点
console.log(oUl.childNodes);//查找ul里的所有的子节点 7
console.log(oUl.childNodes.length);// 7 子节点的个数
console.log(oUl.children);//查找ul里的所有的子元素节点
console.log(oUl.children.length);//3
console.log(oUl.parentNode);//查找ul的父节点
console.log(oUl.parentElement);
</script>
兄弟之间(同级间查找)
同级间查找
节点.nextSibling 查找下一个兄弟节点 可能会查找到文本节点
节点.nextElementSibling 查找下一个元素兄弟节点
节点.previousSibling 查找前一个兄弟节点 可能会查找到文本节点
节点.previousElementSibling 查找前一个元素兄弟节点
<body>
<ul id="list">
<li>列表1</li>
<li id="con">列表2</li>
<li>列表3</li>
</ul>
</body>
<script>
var oLi = document.getElementById("con");
// console.log(oLi.nextSibling);
// console.log(oLi.nextElementSibling);
console.log(oLi.previousSibling);
console.log(oLi.previousElementSibling);
</script>
2.节点创建
创建元素节点:
document.createElement(标签名)
创建文本节点:
document.createTextNode(文本内容)
在父节点的内部最后追加子节点对象
父节点对象.appendChild(子节点对象)
父节点对象.append(参数)
参数:节点对象 或 字符串
<script>
var oDiv = document.createElement("div");//创建了一个div元素对象
// oDiv.innerHTML = "hello";
var oText = document.createTextNode("hello");
oDiv.appendChild(oText);
// console.log(oText);
// console.log(oDiv);
// alert(oDiv);
// document.body.appendChild(oDiv);
// document.body.append(oDiv)
document.body.append("hdhhdhdhdh")
</script>
<body>
<ul id="list"></ul>
<!-- <div id="box">
hello world
</div>
<span id="con">hello span</span> -->
</body>
<script>
var oUl = document.getElementById("list");
var frag = document.createDocumentFragment();//创建一个文档片段
// console.log(frag.nodeType);//11
for (var i = 0; i < 3; i++) {
var oLi = document.createElement("li");
frag.appendChild(oLi);
}
oUl.appendChild(frag)
// 创建文档片段
// document.createDocumentFragment()
</script>
属性操作:
查看属性值 dom对象.getAttribute(属性名)
设置属性 dom对象.setAttribute(属性名, 属性值)
删除属性 dom对象.removeAttribute(属性名)
<body>
<div id="box" a="10">hello world</div>
</body>
<script>
var oDiv = document.getElementById("box");
// console.log(oDiv.getAttribute("id"));//通过属性名 获取 属性值
// console.log(oDiv.id);//通过属性名 获取 属性值
// console.log(oDiv.getAttribute("a"));//
// console.log(oDiv.a);//undefined
// oDiv.setAttribute("title", "这是一个div");
// oDiv.title = "hhhhhh";
// oDiv.setAttribute("b", "100");
// oDiv.b = "hhhhhh";
oDiv.removeAttribute("a")
// <ul>
// <li>12</li>
// <li>33</li>
// <li>344</li>
// 。。。。
// </ul >
// 点击li 显示 点击的是第几个li
</script>
3.节点克隆
克隆节点:
节点对象.cloneNode(参数)
参数:可选 布尔值 默认false 是否克隆后代
若省略则为false,仅克隆元素本身,不克隆后代,若为true,会克隆自身与后代
插入节点:
父节点对象.insertBefore(新节点, 老节点)
在父节点的内部把新节点插入到老节点的前面
<body>
<div id="box">
hello world
<p>hhhh</p>
</div>
<span id="con">hello span</span>
</body>
<script>
var oDiv = document.getElementById("box");
var oSpan = document.getElementById("con");
var oP = oDiv.lastElementChild;//查找div里的最后一个子元素 p
//克隆span
// var c = oSpan.cloneNode(false);
var c = oSpan.cloneNode(true);
c.setAttribute("id", "con2")
// console.log(c);
oDiv.insertBefore(c, oP);
</script>
4.删除节点
<body>
<div id="box">hello world</div>
</body>
<script>
var oDiv = document.getElementById("box");
// var oImg = document.createElement("img");
// oImg.src = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";
// document.body.replaceChild(oImg, oDiv);
// document.body.removeChild(oDiv);
oDiv.remove();
</script>