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}`);
//to see the loop is running or it runs so fast
} ;
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>";
//document.getElementById('one').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; //no parentheses for the function,just reference the name ,like the followed
// bach.οnclick=function(){alert("you didn't!")}
</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;
//if you define var pagetop in here , it will be more expensive
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");
//alert(`${event.which} key was pressed`);
//alert(`${event.key} key was pressed`);
});
</script>
Scope
the defination of variable in different place.
<script>
var aVariable = "a varirable in script";
function bb(){
var aVariable = "a Variable in function";
console.log(aVariable);
}
bb();
console.log(aVariable);
</script>
for the global variables:
- It can be easy to write scripts that accidentally change the value of a variable in the global scope, leading to difficult to troubleshoot bugs.
- If the page loads multiple scripts, variables in the global scope may collide.
[ It is common to include multiple scripts written by different developers in one project.] 当多人编辑的脚本组合时，全局变量容易出错。 - Originally, JavaScript was written with the idea that scripts would be very short, so scope was never going to be a problem.
[ JavaScript was originally going to be a lightweight scripting language, not the full fledged general use programming language it has become.]
one of the ways to avoid global scope is to use these variables in the function**
__any function in javascript is a closure [ keep the variables local to the function]
function(){
var xxx=xxxx;//not global variable
}
or just like this: 【 IIFE (Immediately Invoked Function Expression)
–you don’t need to call the function again】
Use namespacing and immediately invoked function expressions.
(function(){
var xxx=xxxx;//not global variable
}());
another way__ use strict directive
use something like “use strict” will remind you to add var for your variables.
cause JavaScript will throw an error if there is a variable declared in a function without the use of a keyword such as var, let or const.
<script>
"use strict";
var AVariable = " not properly declared.";
console.log(AVariable);
</script>
newest way__ const / let
const is like all const in other languages
<script>
const cheese ="yummy";
console.log(cheese);
//cheese="yucky";
</script>
let could make the variable local to the loops but chould change in the loop
<script>
for(let i=0;i<10;i++){
console.log(i);
}
console.log(`the value of i id${i}`);
</script>
hoisting in Js
means you can use them before you specially declare [给初值定义].
BUT const / let are not hoisted.
Hoisting affects which variables are recognized by JavaScript, based on where in the script file they are defined.
Avoiding hoisting is one more way to keep JavaScript from having variables with unexpected values.
扫一扫
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
