DOM重点内容目录
一.元素的操作
获取元素
修改元素内容
常用鼠标事件
修改样式属性
className给元素添加类名
获取自定义属性值,设置属性值和移除属性
二.节点的操作
父节点节点操作
子节点操作
兄弟节点
创建节点和添加节点
删除节点
复制节点
正题开始
获取元素
获取元素有4种方法
1.根据id获取
doccument.getElementById("标签名")
2.根据标签名获取
doccument.getElementsByTagName("标签名")
3.根据HTML5新增的方法获取
//根据类名返回元素集合对象
document.getElementsByClassName("类名")
//根据指定选择器返回第一个元素对象
document.querySelector("选择器")
//根据指定选择器返回
document.querySelectorAll("选择器")
4.特殊元素获取
//获取body元素
doucument.body
//获取html元素
document.documentElement //返回html元素对象
修改元素内容
innerHTML和innerText
element.innerHTML//从起始位置到终止位置的内容,但他去除HTML标签,同时空格和换行也会去掉
element.innerText//起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
常用鼠标点击事件
修改样式属性
<style>
div {
width: 200px;
height: 200px;
background-color: violet;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector("div");
div.onclick = function () {
this.style.backgroundColor = "purple";
};
</script>
className给元素添加类名
<style>
.text {
width: 100px;
height: 100px;
background-color: teal;
}
.change {
width: 200px;
height: 200px;
background-color: thistle;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="text"></div>
<script>
var text = document.querySelector(".text");
text.onclick = function () {
this.className = "text change";
};
</script>
获取自定义属性
<body>
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector("div");
// 获取id的名字
console.log(div.id);
console.log(div.getAttribute("id"));
// 获取自定义属性
console.log(div.getAttribute("index"));
// 设置属性值
div.id = "test";
// 这个的class必须写成className
div.className = "navs";
// element.setAttribute 把div的index属性改为2
div.setAttribute("index", 2);
div.setAttribute("class", "navss");
// 移除属性
div.removeAttribute("index");
</script>
节点操作概述
父节点操作
<body>
<div class="box">
<span class="erweima"></span>
</div>
<script>
//1.父节点 parentNode
var erweima = document.querySelector(".erweima");
//获取二维码的父节点
console.log(erweima.parentNode);
</script>
子节点操作
兄弟节点操作
创建节点和添加节点
<body>
<ul>
<li>1234</li>
</ul>
<script>
//创建节点元素节点
var li = document.createElement("li");
// 添加节点
var ul = document.querySelector("ul");
ul.appendChild(li);
// 指定元素前面添加节点
var lili = document.createElement("li");
ul.insertBefore(lili, ul.children[0]);
</script>
</body>
删除节点
<body>
<button>删除</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ul = document.querySelector("ul");
var btn = document.querySelector("button");
btn.onclick = function () {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
};
</script>
</body>
复制节点
<body>
<button>删除</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ul = document.querySelector("ul");
var btn = document.querySelector("button");
btn.onclick = function () {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
};
</script>
</body>