TageName/for应用/csstext/this

【1】getElementByTageName('')

与id方法获取元素的三点不同:
1.id方法前面只能加document,tagename前面可以是变量名

2.id方法只能获取一个元素,tagename方法获取的是一个集合,集合元素的先后顺序有元素在文档中的内容决定。

3.id方法是静态的,tagename是动态的。

注意,tagename必须用[]。

【2.】for循环

1.)  var i = 0 ;
2.) i<3;  //关键
3.)i++;

[表达式1]
for (var i=0; i<3;i++){
      alert(i)
}

[表达式2]
var i  = 0;
for (;i<3;){
  alert(i);
  i++;
}

[for循环的简单应用]
遍历二维数组
1.通过访问列表 ,循环往列表里面添加内容
<body>
<ui>
    <li></li>
    <li></li>
    <li></li>
</ui>
</body>
<script>
var oBy = document.getElementsByTagName('body');
var oLi = document.getElementsByTagName('li')
var arr = ['今天','昨天','明天'];
    for(i=0;i<arr.length;i++){
        oLi[i].innerHTML += arr[i];
    };
</script>
</html>

2.自动在页面添加200个按钮

var oBy = document.getElementsByTagName('body');
var oLi = document.getElementsByTagName('li')

for(var i=0;i<200;i++){
    oBy[0].innerHTML += '<input type="button" value="按钮"/>';
}

3.性能优化
实现原理:不与页面产生 多次交互

var str = ''
for(var i=0;i<800;i++){
    str += '<input type="button" value="按钮"/>';
}

oBy[0].innerHTML = str;


【this】调用当前方法(函数)的那个对象;

//this

alert(this); //object window

//window 是js老大;

alert = window.alert( );

function fn( ){
  alert(this);
}
//fn1( );
window.fn1( );

oBtn.click = fn1
此处

嵌套函数内为window;

eg:制作兼容ie6的触发事件

csstext

csstext直接作用于元素内,具有最高优先级,彻底清空style里面的样式是样式重置为最初状态

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>csstext</title>
    <style>
        div{
            width:300px;
            height:400px;
            border:1px solid red;
        }
        input{
            margin-left: 70px;
        }
    </style>
</head>
<body>
    <div id = 'div1'></div>
    <input type="button" value ="提交">
    <input type="button" value ="重置">

    <script>
        var oBtn = document.getElementsByTagName('input');
        var oDiv = document.getElementById('div1');

        oBtn[0].onclick = function (){
            oDiv.style.height = '80px';
        };

        oBtn[1].onclick = function (){
            oDiv.style.cssText = '';
        }


    </script>
</body>
</html>

 





posted @ 2017-09-15 11:22  夏小北666  阅读(234)  评论(0编辑  收藏  举报