一、查看节点
- getElementById( ) 元素的ID名称来访问，返回对拥有指定id的第一个对象的引用
- getElementsByName( ) 按元素的name名称来访问，返回带有指定名称的对象的集合
- getElementsByTagName( )按标签来访问，返回带有指定标签名的对象的集合
-
<body>
-
<div id="box">hello box
</div>
-
</body>
-
<script>
-
var oDiv =
document.
getElementById(
"box");
//div元素对象
-
// var oDiv = document.getElementsByTagName("div")[0];
-
// console.log(oDiv.nodeName); //节点名称 DIV
-
// console.log(oDiv.tagName); //标签名称 DIV
-
-
// console.log(oDiv.nodeType); //1 节点类型
-
// console.log(oDiv.nodeValue); //null 节点值
-
-
// var attr = oDiv.getAttributeNode("id");
-
// console.log(attr);
-
// alert(attr); //[object Attr]属性对象
-
// console.log(attr.nodeName); //节点名称 属性名
-
// console.log(attr.nodeType); //节点类型 2
-
// console.log(attr.nodeValue); //节点值 属性值
-
-
var ch = oDiv.
firstChild;
//第一个子节点
-
// console.log(ch);
-
// alert(ch); //[object Text] 文本对象节点
-
console.
log(ch.
nodeName);
//节点名称 文本
-
console.
log(ch.
nodeType);
//节点类型 3
-
console.
log(ch.
nodeValue);
//节点值 文本值
-
-
// get获取
-
// Attribute 属性
-
// Node 节点
-
-
// 节点类型：
-
// 元素节点 1
-
// 属性节点 2
-
// 文本节点 3
-
</script>
二、查看节点
1、根据层次关系查找节点
（1） 通过父节点对象查找子节点对象
- 父节点对象.firstChild 获取当前元素的第一个子节点
- 父节点对象.lastChild 获取当前元素的最后一个子节点
- 父节点对象.childNodes 获取当前元素的所有子节点 可能会有空格
- 父节点对象.firstElementChild 查找父节点下的第一个子元素节点
- 父节点对象.lastElementChild 查找父节点下的最后一个子元素节点
- 父节点对象.children：获取当前元素的所有子元素
（2）通过子节点对象查找父节点对象
- 子节点对象.parentElement 通过子节点查找父元素
- 子节点对象.parentNode 获取当前元素的父元素
（3）通过子节点查找兄弟节点
- 子节点对象.previousSibling 获取当前元素的前一个兄弟节点
- 子节点对象.nextSibling 获取当前元素的后一个兄弟节点
- 子节点对象.previousElementSibling 获取当前元素的前一个兄弟节点
- 子节点对象.nextElementSibling 获取当前元素的后一个兄弟节点
-
<body>
-
<ul id="box">
-
<li id="list">列表1
</li>
-
<li>列表2
</li>
-
<li>列表3
</li>
-
</ul>
-
</body>
-
<script>
-
var oUl =
document.
getElementById(
"box");
-
var oLi =
document.
getElementById(
"list");
-
-
// console.log(oUl.firstChild);//第一个子节点 可能有文本节点 换行
-
// console.log(oUl.firstElementChild);//第一个子元素节点
-
-
// console.log(oUl.lastChild);//最后一个子节点 可能有文本节点 换行
-
// console.log(oUl.lastElementChild);//最后一个子元素节点
-
-
// console.log(oUl.childNodes);//ul里的所有的子节点对象 可能有文本节点
-
console.
log(oUl.
children);
//ul里的所有的子元素节点对象
-
-
// console.log(oUl.firstChild.nodeType); //3
-
// console.log(oUl.firstChild.nodeValue); //
-
-
// console.log(oUl.childNodes.length); //7
-
// var elArr = [];
-
// for (var i = 0; i < oUl.childNodes.length; i++) {
-
// // console.log(oUl.childNodes[i]);
-
// if(oUl.childNodes[i].nodeType === 1){
-
// elArr.push(oUl.childNodes[i])
-
// }
-
// }
-
// console.log(elArr);
-
-
-
-
console.
log(oLi.
parentNode);
//查找父节点
-
console.
log(oLi.
parentElement);
//查找父元素
-
-
-
-
// 父节点查找子节点
-
-
// 通过父节点对象查找子节点对象（可能会有文本节点） 兼容性好
-
// 父节点对象.firstChild 查找父节点下的第一个子节点
-
// 父节点对象.lastChild 查找父节点下的最后一个子节点
-
// 父节点对象.childNodes 多个 查找父节点下的所有的子节点
-
-
// 通过父节点对象查找子元素节点对象
-
// 父节点对象.firstElementChild 查找父节点下的第一个子元素节点
-
// 父节点对象.lastElementChild 查找父节点下的最后一个子元素节点
-
// 父节点对象.children 多个 查找父节点下的所有的子元素节点
-
-
-
// 子节点查找父节点
-
// 子节点对象.parentNode 通过子节点查找父节点
-
// 子节点对象.parentElement 通过子节点查找父元素
-
</script>
三、查看/修改/删除属性节点
- 查看属性节点：getAttribute("属性名")
- 修改属性节点：setAttribute("属性名","属性值")
- 删除属性节点：removeAttribute(“属性名”)
-
<body>
-
<ul id="box" a="10">
-
<li>列表1
</li>
-
<li id="list">列表2
</li>
-
<li>列表3
</li>
-
</ul>
-
</body>
-
<script>
-
var oUl =
document.
getElementById(
"box");
-
// console.log(oUl.id);
-
// console.log(oUl.a);//无法获取自定义的属性值
-
// console.log(oUl.getAttribute("id"));
-
// console.log(oUl.getAttribute("a")); //可以获取自定义属性
-
-
// 设置
-
// oUl.title = "hello"
-
// oUl.b = 100;
-
-
oUl.
setAttribute(
"title",
"hello")
-
oUl.
setAttribute(
"b",
100);
-
// oUl.removeAttribute("a");
-
oUl.
removeAttribute(
"a");
-
-
// 节点对象.getAttribute("属性名") 根据属性名获取属性值
-
// 节点对象.setAttribute("属性名","属性值")
-
// 节点对象.removeAttribute("属性名") 删除对应的这对属性
-
</script>
四、创建和增加节点 的方法
- createElement（）：创建元素节点
- appendChild（）：末尾追加方式插入节点
- insertBefore（）：在指定节点前插入新节点
- cloneNode（）：克隆节点
-
<style>
-
img{
-
width:
100px;
-
}
-
</style>
-
</head>
-
<body>
-
<div id="box">
-
hello world
-
</div>
-
-
<button id="btn">点击添加图片
</button>
-
</body>
-
<script>
-
var oDiv =
document.
getElementById(
"box");
-
var oBtn =
document.
getElementById(
"btn");
-
// var oSpan = document.createElement("span");
-
oBtn.
onclick =
function(
){
-
var oImg =
document.
createElement(
"img");
//创建图片节点对象
-
// oImg.src = ""
-
oImg.
setAttribute(
"src",
"./img/biaoqing.webp");
//设置图片节点对象src属性
-
// oDiv.appendChild(oImg);//把创建好的图片节点对象追加到div内部最后
-
document.
body.
appendChild(oImg);
//把创建好的图片节点对象追加到body内部最后
-
}
-
-
// console.log(oSpan);//元素对象
-
// console.log(oImg);//元素对象
-
// alert(oSpan);
-
// oSpan.innerHTML = "我是span";
-
// console.log(oSpan);//元素对象
-
-
// 追加
-
// oDiv.appendChild(oSpan);
-
-
-
// 创建元素对象
-
// document.createElement("元素名称")
-
-
// 追加元素对象到父元素内部最后
-
// 父节点对象.appendChild(子节点)
-
-
</script>
五、属性操作
-
<body>
-
<ul id="box" a="10">
-
<li>列表1
</li>
-
<li id="list">列表2
</li>
-
<li>列表3
</li>
-
</ul>
-
</body>
-
<script>
-
var oUl =
document.
getElementById(
"box");
-
// console.log(oUl.id);
-
// console.log(oUl.a);//无法获取自定义的属性值
-
// console.log(oUl.getAttribute("id"));
-
// console.log(oUl.getAttribute("a")); //可以获取自定义属性
-
-
// 设置
-
// oUl.title = "hello"
-
// oUl.b = 100;
-
-
oUl.
setAttribute(
"title",
"hello")
-
oUl.
setAttribute(
"b",
100);
-
// oUl.removeAttribute("a");
-
oUl.
removeAttribute(
"a");
-
-
// 节点对象.getAttribute("属性名") 根据属性名获取属性值
-
// 节点对象.setAttribute("属性名","属性值")
-
// 节点对象.removeAttribute("属性名") 删除对应的这对属性
-
</script>
1420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
