DOM manipulation 045
1. What is DOM
DOM: Document Object Model It provides a structured representation for the document and defines how to access the document structure through scripts. The purpose is to make a specification for js to operate HTML elements.
DOM tree (everything is a node):
Element node: HTML tag
Text node: the text in the label (such as a space between labels and a new line)
Attribute Node: Attributes of the label
What DOM can do: Find an object (element node) Set the value of the object Set the style of the element and move it to create and delete elements Trigger response of events: Event source event driver
The way to get DOM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box" id="box">
<p>alex</p>
</div>
<p class="box">吴老板</p>
<script type="text/javascript">
console.log(window);
console.dir(document);
console.log(document.documentElement);
console.log(document.body)
//1.通过id获取
var oDiv = document.getElementById('box');
console.log(oDiv);
var 2. Obtaining multiple DOM objects through tags is a pseudo-array//
oTag = document.getElementsByTagName('div')[0]; // HTMLCollection pseudo-array has array index and length, but there is no array method
console.log(oTag);
oTag.style.color = 'red' ;
// 3. Obtaining the class name is also a pseudo-array of multiple DOM objects
var oActives = document.getElementsByClassName('box' );
console.log(oActives);
for ( var i = 0; i < oActives.length; i ++ ){
// style setting
oActives[i].style.backgroundColor = 'green' ;
}
// life-saving straw
var oD = document.querySelectorAll('div p' )
console.log(oD);
oD.forEach(function (item,index) {
console.log(item);
})
</script>
</body>
</html>
Two operations in DOM:
1 js processing of values:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
wusir
<p>alex</p>
</div>
<input type="text" value="" id="user">
<script>var oDiv = document.getElementById('box');
// oDiv.innerText= '<h1>哈哈哈哈</h1>';// oDiv.innerHTML = '嘿嘿嘿嘿';// oDiv.innerHTML = '<h3>嘿嘿嘿</h3>' Get all label elements in the parent label (sub-label , space, newline, text)//console.log(oDiv.innerText);//Only get all (current label and sub-label) text content//
console.log(oDiv.innerHTML);
// Setting value is only applicable to form control elements
document.getElementById('user').value = 'alex' ;
console.log(document.getElementById( 'user' ).value) ;
</script>
</body>
</html>
2 Operations on css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var oDiv = document.getElementsByClassName('box')[0];
var isRed = true;
oDiv.onclick = function () {
if (isRed) {
console.log(this.style);
// this who does the event operation this points to who
this .style.backgroundColor = 'green' ;
this .style.width = '400px' ;
isRed = false ;
} else {
this .style.backgroundColor = 'red ' ;
isRed = true ;
}
}
</script>
</body>
3 Operations on tag attributes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 300px;
background-color: red;
}
#box {
background-color: yellow;
}
.active {
display: none;
}
</style>
</head>
<body>
<button id="btn">切换</button>
<div class="box"></div>
<script>
var oDiv = document.getElementsByClassName('box')[0];
var oBtn = document.getElementById('btn' );
var isShow = true ;
// Do not wait for
oBtn.onclick = function () {
if (isShow) {
// Assign id to label
// oDiv.id = 'box';
// oDiv.title = 'hahaha';
// console.log(oDiv.className); //box
// Be sure to use className when setting the class name because class is a keyword
oDiv.className = oDiv .className + 'active' ;
isShow = false ;
} else {
oDiv.className= 'box';
isShow = true;
}
}
console.log(11111);
</script>
</body>
</html>
4. Operation of .img tag attributes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*重置样式*/
*{
padding: 0;
margin: 0;
}
.swiper{
width: 1000px;
height: 460px;
margin: 0 auto;
background-color: red;
position: relative;
}
.swiper span{
position: absolute;
right: 0;
top: 50%;
width: 41px;
height: 69px;
background: green url("./icon-slides.png") no-repeat -125px 0;
}
</style>
</head>
<body>
<div class="swiper">
<span id="next"></span>
<img src="./1.png" alt="" id="meinv">
</div>
<script>
var oImg = document.getElementById('meinv');
console.dir(oImg);
var oNext = document.getElementById('next');
oImg.onmouseover = function () {
// this.src gets the attributes of the DOM object
// console.log(this.src); //absolute path
// gets the attributes on the label via getAttribute(''); the attributes on the label obtained
console.log( this .getAttribute('src' ));
this .src = '1_hover.png' ;
this .alt = 'hahaha'
}
oImg.onmouseout = function () {
this .src = '1.png'
// console.log(this.getAttribute('src'))
}
oNext.onmouseover = function () {
// console.log( this.style);
this.style.backgroundPositionX = '-42px';
this.style.backgroundPositionY = '0';
}
</script>
</body>
</html>
5. Attribute method setting and acquisition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">alex</div>
<script>
// document.getElementsByTagName('div')[0].setAttribute()
</script>
</body>
</html>
6. Distinction between object attributes and tag attributes
# Distinguish between DOM object attributes and tag attributes // this.src gets the attributes of the DOM object console.log( this .src); // Absolute path // Gets the attributes on the label via getAttribute(''); Get the attribute on the tag console.log( this .getAttribute('src'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="user" id="user">
<img src="./1.png" alt="" id="aImg">
男 <input type="radio" name="sex" checked="xxxxx" id="nan">
女 <input type="radio" name="sex" id="nv">
<script>
function $(idName) {
return document.getElementById(idName);
}
var oInput = document.getElementById('user');
var oImg = document.getElementById('aImg');
console.dir(oInput);//DOM对象
console.log(oInput.type);
console.log(oInput.getAttribute( 'type' ));
console.dir(oImg);
console.log(oImg.src);
console.log(oImg.getAttribute( 'src' ));
console.log( $( 'nan').checked); // The attribute radio button of the object is submitted to the background and it is recommended to use the object attribute checked
console.log( $('nan').getAttribute('checked')) ; // Attributes on the label
</script>
</body>
</html>
posted @
2018-11-25 19:20
You are not as important as you think
Read (
...
) Comment (
...
)
Edit
Favorites