DOM
javascript组成:ESCAscript、BOM、DOM
ESCAscript: 基础语法
BOM:浏览器对象模型
window:窗口
Iocation:地址栏
history:历史记录
document:文档
DOM:文档操作模型 document
定时器:
/延迟执行
setTimeout(function(){},时间);
例子:
<button onclick="dianji()" >按钮</button>
js代码:
function dianji(){
setInterval(function(){
console.log(9);
},1000);
}
/间隔执行
setInterval(function(){},时间);
清除定时器
clearInterval(对象); clearTimeout(setTimeout对象);
DOM操作套路
找到元素 操作元素
1、找元素 返回元素对象
document.getElementById();//
document.getElementsByName();
document.getElementsByTagName();
document.getElementsByClassName();
document.getElementById();例子:
<div id="a1" name="name" bs="123" style="color:red;">
123
</div>
js代码:
var a1 = document.getElementById("a1");//获取id
alert(a1.innerHTML); //获取a1内容
JQ代码:
var a1 = $("#a1");
alert(a1.html());
document.getElementsByClassName()例子:
<div class="a2" onclick="tanChu(this)">456</div> <div class="a2">789</div>
js代码:
var a5 = document.getElementsByClassName("a2");
//遍历a5
for(var i=0;i<a5.length;i++){
alert(a5[i].innerHTML);
}
JQ代码:
var a2 = $(".a2");
for(var i=0;i<a2.length;i++){
alert($(a2[i]).html());
}
document.getElementsByTagName()//获取标签名
例子:
<div id="a1" name="name" bs="123" style="color:red;">123</div> <div class="a2" onclick="tanChu(this)">456</div> <div class="a2">789</div>
js代码:
var a3 = document.getElementsByTagName("div");
for(var i=0;i<a3.length;i++){
alert(a3[i].innerHTML);
}
JQ代码:
var a3 = $("div");
for(var i=0;i<a3.length;i++){
alert($(a3[i]).html());
}
2、操作元素内容
var obj=document.getElementById();
非表单元素: obj.innerHTML=123
表单元素:obj.Value
直接写就是获取值,加上等号就是修改值
3、操作元素属性
obj.setAttribute("class","btn"); 设置
obj.getAttribute("id");=>btn 获取
4、操作元素样式
obj.style.color 只可以操作行内样式
5、操作元素事件
obj.onclick=function(){}
obj.addEventListener()
6、创建删除元素
obj.remove();
Obj.removeattribute(“id”); //删除属性!
var div = document.createElement('div');
js文件格式
定义变量
var name = "";//
var sum = 0;//
var obj = null;//
页面加载完成
window.onload = function(){ }
方法
function f1(){}
function f2(){}
介绍方法
window.onload=function(){}
介绍两个队形
Math:数学类
date:时间日期类

浙公网安备 33010602011771号