目录
DOM节点
我们的页面是由节点组成的,每一个组成部分都是一个节点。
节点的分类:
元素节点 html标签 img body input div
文本节点 文字部分
属性节点 标签内的属性
注释节点
1.document
页面中最大的节点,有且只有一个。不属于元素节点,是页面中所有节点的容器。 根节点。
2.html
页面中最大的元素节点。根元素节点。
3.元素节点
html标签
4.文本节点
每一段文本内容都是一个文本节点
包含 换行 和 空格
一般来说作为元素节点的子节点存在。
5.属性节点:
属性节点不能单独存在,必须依赖于元素节点。
6.注释节点
页面中的注释,作为说明文本使用户。
自定义节点获取方法
<script>
/**
node 表示传入的节点,获取该节点的元素节点。
classStr 表示传入的classname ,通过classname匹配元素节点
*/
function elementsByClassName(node,classStr){
// 1.获取node这个节点下面的所有子节点。
var nodes = node.getElementsByTagName("*");
// 2.存放符合条件的节点
var arr = [];
//3.遍历所有的子节点
for (var i = 0; i < node.length; i++) {
//4.判断子节点的class是否与传入的classStr相等
if(nodes[i].className === classStr){
//5.若相等,则将其放入数组中。
arr.push(nodes[i]);
}
}
return arr;
}
</script>
操作元素节点的属性
操作元素节点的属性
- 标签上的属性分类:
1.原生属性
2.自定义属性
3.H5 自定义属性
1.原生属性
语法:元素.属性名
修改/新增:
元素.属性名 = “值”
获取:
元素.属性名
【注意】class属性是例外,不能直接通过属性名获取,而是用className
2.自定义属性
不能直接使用 元素. 这个语法来获取。
三个方法去操作:
1、获取
getAttribute(“属性名”);
返回值:字符串
<body>
<div class="box" id="box2" data-name="BOXNAME" abc="box3">我是div标签</div>
</body>
2、设置
setAttribute(“属性名”,“属性值”)
<body>
<div class="box" id="box2" data-name="BOXNAME" abc="box3">我是div标签</div>
</body>
3、删除
removeAttribute(“属性名”)
<body>
<div class="box" id="box2" data-name="BOXNAME" abc="box3">我是div标签</div>
</body>
【注意】这三个方法也可以操作原生属性
3.H5 自定义属性
每一个元素节点上都有一个属性:dataSet
里面包含了所有的H5自定义属性。
键值对结构: 例子;data-id =“idBox”
key:data-XXX xxx的内容。
value:属性值
获取:
元素.dataset.key
<body>
<div class="box" id="box2" abc="box3">我是div标签</div>
</body>
设置:
元素.dataset.key = “值”
<body>
<div class="box" id="box2" abc="box3">我是div标签</div>
</body>
删除
delete 元素.dataset.key
操作元素的类名
1。按照原生属性的方式来操作
获取:
元素.className
设置:
元素.className = “值”
追加:
元素.className += " 值";
【注意】 追加时,值的前面要加一个空格。
删除:
1.重新设置一遍。
2.
2.1 获取classname属性值、
2.2 按照空格去分割字符串
2.3 遍历数组,将要删除的字符串删除
2.4 数组的join方法
2.H5标准给我们一个API
- 元素节点都有一个属性叫做:classList
里面包含了所有的class值。
获取:
元素.classList 获取class值的集合。
想要获取单个,使用下标。
新增:
元素.classList.add(“新增的类名”)
删除:
元素.classList.remove(“删除的类名”)
替换:
元素.classList.replace(“旧类名”,“新类名”) ;
toggle() 切换
语法:元素.classList.toggle(“类名”)
当元素拥有这个类名时,将类名删除
当元素没有这个类名时,将类名添加
全选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 160px;
padding: 5px;
border: 1px solid #333;
margin: 100px auto 0px;
}
.box>div {
padding: 15px;
}
</style>
<!--
需求分析:
1.点击全选时,让所有的按钮都选中 若全选已经选中,则是全不选
2.点击单个的复选框时,判断,若全部都已选中,全选则应该选中,否则不选中。
-->
<script>
window.onload = function() {
//1.获取全选和选项
var allBtn = document.querySelector(".all>input");
var itemBtns = document.querySelectorAll(".items>input");
// console.log(allBtn.checked);
allBtn.onclick = function() {
// 2.获取all本身的选中状态,遍历item,将值赋值给所有的item
for (var i = 0; i < itemBtns.length; i++) {
itemBtns[i].checked = allBtn.checked;
}
}
// 3.给itemBtn 添加点击事件,每次点击时判断是否已经全部选中
for (var i = 0; i < itemBtns.length; i++) {
itemBtns[i].onclick = function() {
// 4.定义一个变量,假设所有的item都已经选中
var flag = true;
for (var j = 0; j < itemBtns.length; j++) {
// 5.当item未选中时
if (!itemBtns[j].checked) {
flag = false;
break;
}
}
allBtn.checked = flag;
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="all">
全选:<input type="checkbox">
</div>
<hr>
<div class="items">
选项一:<input type="checkbox"><br> 选项一:
<input type="checkbox"><br> 选项一:
<input type="checkbox"><br> 选项一:
<input type="checkbox"><br>
</div>
</div>
</body>
</html>
操作元素节点的样式
元素节点的样式:
- 样式分为:
行内
内嵌
外链
行内样式:
原生属性的方式获取
元素.style.样式的属性名
【注意】如果属性名是多个单词,第二个单词首字母大写,删除中划线。
该方法只能获取行内。
获取元素的有效样式
标准浏览器:
getComputedStyle(要获取样式的元素)
IE低版本:(IE8以下)
元素.currentStyle.样式属性名 box.currentStyle.width
设置样式
语法:元素.style.样式名 = “值”;
<style>
#box {
width: 200px;
}
</style>
<script>
window.onload = function() {
var box = document.getElementById("box");
//console.log(box.style.width); //原声元素获取方式
// console.log(getComputedStyle(box).width); // 标准浏览器获取样式
// console.log(box.currentStyle["width"]); // IE低版本获取样式
// console.log(getStyle(box, "width")); //获取元素的宽度
//点击变色按钮时,背景图颜色改变
btn.onclick = function() {
box.style.backgroundColor = "blue";
}
}
// node 要获取样式的元素节点 cssStyle 要获取样式的属性名
function getStyle(node, cssStyle) {
return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
}
</script>
</head>
<body>
<button id="btn">变色</button>
<div id="box" style="height: 100px;background-color: hotpink;"></div>
</body>
属性节点
属性节点:
获取元素节点的属性节点
元素.attributes
单个属性节点:
元素.attributes.getNamedItem(“属性名”);
通过节点关系获取节点
DOM节点不是孤立存在,我们可以通过节点之间的关系去获取他们。
节点的关系,是以属性的方式存在的。
获取父节点。
节点.parentNode
获取兄弟节点
1.下一个节点
node.nextSibling
对于标准浏览器,标签,空文档,换行都属于节点。
IE低版本:指下一个元素节点。
2.下一个元素节点
node.nextElementSibling
下一个兄弟节点 = 节点.nextElementSibling||节点.nextSibling
3.上一个节点
node.previousSibling
4.上一个元素节点
node.previousElementSibling
获取单个子节点
1.第一个子节点
node.firstChild
2.获取第一个元素节点
node.firstElementChild
3.获取最后一个子节点
node.lastChild
4.获取最后一个元素节点
node.lastElementChild
获取所有子节点
1.获取所有子节点
语法:node.childNodes
返回的是子节点的伪数组(元素节点,文本节点,注释节点)
2.获取所有的元素子节点
语法:node.children
返回元素节点。使用最多的方法。
节点的属性
属性:事物的特征
nodeName: 节点名称
注释节点: #comment
文本节点: #text
元素节点: 大写的标签名
属性节点: 属性名
nodeType:节点类型
注释节点:8
文本节点:3
元素节点:1
属性节点:2
nodeValue:节点的值
注释节点:注释内容
文本节点:文本内容
元素节点:null
属性节点:属性值
<script>
window.onload = function() {
// var box = document.getElementById("box");
// console.log(box.parentNode);//获取父节点
// console.log(box.nextSibling);
// console.log(box.nextElementSibling);
// console.log(box.previousSibling);
// console.log(box.previousElementSibling);
// console.log(document.body.firstElementChild);
// console.log(document.body.childNodes); //获取页面中所有的元素节点
var firstChild = document.body.firstChild;
var sec = firstChild.nextSibling;
var h1 = document.body.firstElementChild;
var title = h1.attributes.getNamedItem("id");
// console.log("注释节点:nodeName=" + firstChild.nodeName);
console.log("注释节点:nodeType=" + firstChild.nodeType);
// console.log("注释节点:nodeValue=" + firstChild.nodeValue);
// console.log("文本节点:nodeName=" + sec.nodeName);
console.log("文本节点:nodeType=" + sec.nodeType);
// console.log("文本节点:nodeValue=" + sec.nodeValue);
// console.log("元素节点:nodeName="+h1.nodeName);
console.log("元素节点:nodeType=" + h1.nodeType);
// console.log("元素节点:nodeValue="+h1.nodeValue);
// console.log("属性节点:nodeName="+title.nodeName);
console.log("属性节点:nodeType=" + title.nodeType);
// console.log("属性节点:nodeValue="+title.nodeValue);
}
</script>
</head>
<body>
<!-- 我是注释 -->三是规模
<h1 id="title">我是一级标题</h1>
<div id="box"></div>
<p>我是p标签</p>
</body>