JS文件写法操作，DOM基本操作

 js文件写法、规范

// 定义全局变量

var num = 0;//这个是用来记数的。

// 页面加载完成

window.onload = funtion(){

intVar();//初始化变量

scrollFun();//滚动监听

。。。。

}

// 定义方法

funtion initVar(){}

funtion scrollFun(){}

dom操作

dom  操作页面上的标签

js的组成：ECMAscript（核心语法）

BOM  浏览器对象模型

windows  窗口

location  地址栏

history  历史记录

document  文档  html文件

DOM  文档对象模型

<script>

//打开关闭窗口

// windows.open("打开文件名";"打开文件位置");

// windows.close属性();

//修改地址栏

// location.href;在本页面跳转

// location.href="网页地址";则跳转到网页地址上。

// location.reload();刷新

// location.replace();

//定时器

// 延迟执行

// var setTimeoutObj setTimeout(funtion(){

//     alert(123);

// });

// 间隔执行

// setInterval(funtion(){

//     console.log(123);

// },3000);   以毫秒为单位。

// 停止定时器

//       clearTimeout(setTimeoutObj);

//       clearTimeout(setin);

//       间隔打印三次停止

// var intv setInterval(funtion(){

//     sum++;

//     console.log(123);

//     if (sum >= 3) {

//              clearTimeout(intv);

//     }

// },1000);

// 动态时钟

// var  str = "";

// setInterval(funtion(){

//     str = "";

//     var tt = new Date(),

//              y = tt.getFullYear(),

//              M = +tt.getMouth()+ 1 ,

//              d = tt.getDate(),

//              h = tt.getHours(),

//              m = tt.getMinutes(),

//              s = tt.getSecounds();

//     var str = y + '-'+ M + '-' + d + '' + h + ':' + m + ':' + s;

//     document.getElemntsByTagName('div')[0].innerHTML = str;

//     document.write(str);

//     },1000);

//滚动监听

// var flag = true;

//    window.onscroll= function(){

//        //变量t是滚动条滚动时，距离顶部的距离

//        var t = document.documentElement.scrollTop||document.body.scrollTop;

//        if(t = 100 && flag == true){

//            flag = false;

//            alert(123);

//        }

//    }

// 页面加载完成。

// 很重要，！将全部页面加载完成！！！

window.onload = funtion(){   }

dom 文档对象模型 body ：

何时找 何时操作  找到标签，操作标签

找到标签：

document.getElementById("btn");

document.getElementsByName("btn"); 通过name属性

document.getElementsByTagName("btn"); 通过标签

document.getElementsByClassName("btn"); 通过class属性

了解：结合嵌套来找。

操作js对象

内容

非表单元素：obj.innerHTML   obj.innerHTML = 123;

表单元素： obj.value   obj.value = 123;

样式

obj.style.color  obj.style.color = red;

这个操作只能操作行内样式

background-color  变成  backgroundColor   去掉“-” 开头字母大写

　　　　　属性 obj
　　　　　　　　obj.setAttribute('class','dd ff');//覆盖性设置属性
　　　　　　　　obj.getAttribute('class','dd');//获取属性
　　　　　　　　obj.removeAttribute('class');//删除属性
　　　　　事件
　　　　　　不同地方
　　　　　　　　方式一：
　　　　　　　　onclick 属性
　　　　　　　　方式二：js中定义
　　　　　　　　obj.onclick = function(){}
　　　　　　　　//写在在Evt事件内
　　　　　　　　//此处function无实际意义，语法如此。只是说明这里是个方法调用。
　　　　　　　　方式三：
　　　　　　　　obj.addEventistener('click',f1); //this 写在行内
　　　　　　　　obj.addEventistener('click',f1);
　　　　　　　　obj.removeEventistener('click');

创建删除

// 节点操作

// var btnDom = document.getElementById("btn").getElementsByTagName('span');

// var btnsDom = document.getElementsByTagName("btn");

// console.log(btnDom.firstElementChlid);

//根据ID 查找控件

// var dombtn = document.getElementById('btn');

// alert(dombtn);

//根据标签名，查找

// var dombtn = document.getElementsByTagName("button");

// console.log(dombtn);      //找出来的东西叫集合，类似是数组

//     for (var i in dombtn) {  //用for in  遍历的时候全出来了

//              if (!isNaN(i)){      // 需要判断非数字的跳过

//                       continue;

//              }

//              console.log(dombtn[i]);

//     }

// console.log('-----------------');

//for(var i =0;i<//btnDom.length;i++){　//这种遍历不用判断

//console.log(btnDom[i]);

//     }