DOM
DOM: Document Object Model 文档对象模型
getElementByld()
getElementsByTagName()
var pp=document.getElementsByTagName('p');
for(var i=1;i<pp.length;i++){
pp[i].style.color="red";
alert(`showing the paragraph ${i}`);
} ;
getElementsByClassName()
<p id="one"> let's change the world</p>
<p> or maybe just be yourself</p>
<p class="two">or just let it go</p>
<p class="two">but you should listen to your heart</p>
<script>
var pp=document.getElementsByClassName('two');
for(var i=0;i<pp.length;i++){
pp[i].style.color="red";
} ;
</script>
querySelectorAll()
<div id="one">
<p> or maybe just be yourself</p>
<p class="two">or just let it go</p>
<p class="two">but you should listen to your heart</p>
</div>
<script>
var pp=document.querySelectorAll('.two');
for(var i=0;i<pp.length;i++){
pp[i].style.color="red";}
</script>
innerHTML
<div id="one">
<p> or maybe just be yourself</p>
<p >or just let it go</p>
<p >but you should listen to your heart</p>
</div>
<script>
var mydiv = document.getElementById('one');
mydiv.innerHTML ="<p>oh who is drunken</p>";
</script>
classname
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>freyua's page</title>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<h1>Loops</h1>
<div id="one">
<p> or maybe just be yourself</p>
<p>or just let it go</p>
<p>but you should listen to your heart</p>
</div>
<script>
document.querySelector('p').className="blue";
</script>
</body>
</html>
appendchild套圈
<script>
var mytag =document.createElement('p');
var mytext = document.createTextNode("here is a new story");
mytag.appendChild(mytext);
var mydiv=document.querySelector('div');
mydiv.appendChild(mytag);
</script>
Event
Capturing the events
<button>don't click on </button>
</div>
<script>
var bach =document.querySelector('button');
function onch(){
alert("I told you not click on ");
}
bach.onclick=onch;
</script>
onclick是捕获方法产生的方式
addEventListener同样针对所有产生方法的方式
bach.addEventListener('click',function(){alert("you didn't listen!")});
addEventListener 【方法】与 event property 【属性】区别：
-
An element can listen for more than one event when attached via the addEventListener method, but can only have one event property on it at a time.
事件属性一次只有一个元素属性例如onclick 但 addEventListener可以面向所有元素 -
The event listener can be removed via the removeEventListener method, whereas the event property can only be removed by replacing that event property with a different one. -
onsubmit is an event property, and the addEventListener is a method.
the event object
bach.addEventListener('click',function(){
event.target.style.backgroundColor="yellow";
alert("you didn't listen!");});
the event could be change by the parentheses of the function, like the followed: <lolwow
it represents the event object which has methods in JavaScript that enable certain functionality.
bach.addEventListener('click',function(lolwow){
lolwow.target.style.backgroundColor="yellow";
alert("you didn't listen!");});
prevent default behaviours
<a href="https://www.baidu.com">check in baidu</a>
</div>
<script>
var bach =document.querySelector('a');
bach.addEventListener('click',function(){
event.preventDefault();
alert("you didn't listen!");});
</script>
when use the preventDefault the name won’t show on the address bar
<form method = "get">
<label>your name:<input type="text" name="name"></label>
<input type="submit">
</form>
<script>
var bach =document.querySelector('form');
bach.addEventListener('submit',function(event){
event.preventDefault();
var formdata =document.querySelector('input').value;
alert(formdata);
});
</script>
mouseover & mouseout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{
height:80px;
width:50px;
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>Events</h1>
<div></div>
<script>
var heading=document.querySelector('h1');
var Divv=document.querySelector('div');
Divv.addEventListener('mouseover',function(){
heading.innerHTML="the mouse is over the box";
});
Divv.addEventListener('mouseout',function(){
heading.innerHTML="the mouse has left the box";
});
heading.addEventListener('mouseover',function(){
heading.innerHTML="the mouse is over the heading lol";
});
</script>
</body>
</html>
scroll
change the script part like the followed , you can see it fire when you scroll a little bit. SO console in here is expensive which your page will be bogged down .
<script>
var pagetop;
window.addEventListener('scroll',function(){
pagetop =window.pageYOffset;
console.log(pagetop);
});
</script>
resize
<script>
window.addEventListener('resize',function(){
console.log(`the window width is ${window.innerWidth}`);
console.log(`the window height is ${window.innerHeight}`);
});
</script>
keydown
<script>
document.addEventListener('keydown',function(){
alert("a key was pressed");
});
</script>
|