1. DOM
DOM object: Document Object Model document object model, function, through the DOM object can access and manipulate each tag of the html file, after the html document is loaded into the memory of the browser, we think that a DOM tree is formed, and Any html tag, label attribute and text are node elements on this tree.
<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 Registering events There
are two common ways of event registration, one is to register the event on the element, the other is to register the event on the acquisition object ①Register the event
on the element
<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>
②Get the element object and register the event on the object
<script>
var changeMe = function () {
alert(event.target.value);
}
document.getElementById("txt1").onchange = changeMe;
</script>
1.2 Dynamic operation elements
Create elements and add sub-elements
Click the button to add text box elements
<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>
Add an element before an element
Click the button to add a text box element in front of the button
<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>
Click the button to delete the list node
<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>
Click the button to add a new label
<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 Get the content of the element
① innerHTML
get the complete content of the element
<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
gets the content of the text part of the element
<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 Operation style
①style attribute Click the button to change the 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 attribute
Click the button to set the style of 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>
Click the button to set the style of multiple labels
<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>