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.οnscrοll= 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]);

         //     }

 

转载于:https://www.cnblogs.com/Ice-K/p/10574893.html