一. DOM
DOM对象:Document Object Model 文档对象模型、作用、通过DOM对象可以访问和操作html文件的每个标签、html文档加载到浏览器的内存中后、我们认为形成了一颗DOM树、而任何一个html签、标签属性和文本都是这个树上的节点元素。
<body>
<div id="dv1" class="dv">我是dv1</div>
<div id="dv2" class="dv">我是dv2</div>
<div id="dv3" class="dv">我是dv3</div>
<div id="dv4" class="dv">我是dv4</div>
<input id="txt1" class="txt" name="txt" type="text" value="">
<input id="txt2" class="txt" name="txtx" type="text" value="">
<input id="txt3" class="txt" name="txt" type="text" value="">
</body>
<script>
console.log(document.getElementById("dv1"));//根据ID获取元素
console.log(document.getElementsByClassName("dv"));//根据类名获取元素
console.log(document.getElementsByName("txtx"));//根据name获取元素
console.log(document.getElementsByTagName("div"));//根据标签获取元素
console.log(document.querySelector(".dv"));//获取第一个元素
console.log(document.querySelectorAll(".dv"));//获取所有元素
</script>
1.1 注册事件
事件注册常用方式两种,一种在元素上注册事件,另一种在获取对象上注册事件
①在元素上注册事件
<input type="button" value="按钮" onclick="clickMe()">
<input type="text" name="" id="txt1" value="阿猫" onchange="changeMe()">
<input type="text" name="" id="txt1" value="阿猫">
<script>
function clickMe() {
//点击触发
//获取标签对象
var txt = document.getElementById("txt1");
//通过对象获取属性
alert(txt.value);//阿猫
//通过点击目标获取对象在通过该对象获取属性
alert(event.target.value);//按钮
}
function changeMe() {
//改变触发
alert(event.target.value);//阿猫111
}
</script>
②获取元素对象,在对象上注册事件
<script>
var changeMe = function () {
alert(event.target.value);
}
document.getElementById("txt1").onchange = changeMe;
</script>
1.2 动态操作元素
创建元素,添加子元素
点击按钮,添加文本框元素
<body>
<input type="button" id="btnCreateNeTag" value="">
<script>
var btn = document.getElementById("btnCreateNeTag");
btn.onclick = function () {
var newTag = document.createElement("input");
document.body.appendChild(newTag);
}
</script>
</body>
在某个元素前添加元素
点击按钮,在按钮前面添加文本框元素
<body>
<input type="button" id="btnCreateNeTag" value="">
<script>
var btn = document.getElementById("btnCreateNeTag");
btn.onclick = function () {
var newTag = document.createElement("input");
document.body.insertBefore(newTag,btn);
}
</script>
</body>
点击按钮,删除list节点
<body>
<input type="button" id="btnCreateNeTag" value="">
<ul id="ulList"><li>1</li><li>2</li><li>3</li></ul>
<script>
var btn = document.getElementById("btnCreateNeTag");
btn.onclick = function () {
var list = document.getElementById("ulList");
list.removeChild(list.childNodes[0]);//删除第一个节点
list.removeChild(list.firstChild);//删除第一个节点
list.removeChild(list.lastChild);//删除最后一个节点
list.removeChild(); //这样写是错误的,加参数
}
</script>
</body>
点击按钮,添加新的标签
<body>
<input type="button" id="btnCreateNeTag" value="">
<ul id="ulList"><li>1</li><li>2</li><li>3</li></ul>
<script>
var btn = document.getElementById("btnCreateNeTag");
btn.onclick = function () {
var newTag = document.createElement("div");
newTag.innerHTML="你好啊!";
document.body.appendChild(newTag);
}
</script>
</body>
1.3 获取元素内容
① innerHTML
获取元素中完整的内容
<body>
<div id="dv1">
<span>Hello </span>
<span>world</span>
</div>
<script>
var content=document.getElementById("dv1").innerHTML;
console.log(content);
//<span>Hello </span>
//<span>world</span>
</script>
</body>
② innerText
获取元素中文字部分的内容
<body>
<div id="dv1">
<span>Hello </span>
<span>world</span>
</div>
<script>
var content=document.getElementById("dv1").innerText;
console.log(content);
//Hello world
</script>
</body>
1.3 操作样式
①style属性 点击按钮改变样式
<body>
<p id="p1">Hello world! P1</p>
<p id="p2">Hello world! P2</p>
<input type="button" value="变" onclick="change()">
<script>
function change() {
document.getElementById("p2").style.backgroundColor = "red";
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "微软雅黑";
document.getElementById("p2").style.fontSize = "20px";
document.getElementById("p2").style.cssFloat = "right";
//移动到右边
var backColor = document.getElementById("p2").style.color;
alert(backColor);//blue
}
</script>
② className属性
点击按钮设置P2的样式
<body>
<p id="p1">Hello world! P1</p>
<p id="p2">Hello world! P2</p>
<input type="button" value="变" onclick="change()">
<script>
function change() {
document.getElementById("p2").className = "ppp";
alert(document.getElementById("p2").className);
//ppp
}
</script>
<style>
.ppp {
background-color: red;
color: blue;
}
</style>
</body>
点击按钮设置多个标签的样式
<body>
<p id="p1">Hello world! P1</p>
<p id="p2">Hello world! P2</p>
<input type="button" value="变" onclick="change()">
<script>
function change() {
var els = document.getElementsByTagName("p");
for (let i = 0; i < els.length; i++) {
const element = els[i];
element.style.backgroundColor = "red";
}
}
</script>
<style>
.ppp {
background-color: red;
color: blue;
}
</style>
</body>