前端学习笔记3-js-DOM

最新推荐文章于 2024-10-03 16:36:49 发布

Lei Peng

最新推荐文章于 2024-10-03 16:36:49 发布

阅读量453

点赞数

js - DOM：
查找
  直接查找
   var obj = document.getelementbyid('id')
  间接查找
   文件内容操作
    innertext // 仅文本
    innerhtml //全内容
    value //input value获取当前标签中的值
    select // 对select 获取选中的value值 -->selectedIndex
    textarea //value获取当前标签中的值
    搜索框示例：
   <body>
    <div style="width: 600px;margin: 0 auto;">
     <input id="i1" οnfοcus="Focus();" οnblur="Blur();" type="text" value="请输入关键字" >
     <input type="text" placeholder="请输入关键字" >

    </div>
    <script>
     function Focus(){
      var tag = document.getElementById("i1");
      var val = tag.value;
      if(val == "请输入关键字"){
       tag.value = "";
      }
     }
     function Blur(){
      var tag = document.getElementById("i1");
      var val = tag.value;
      if(val == ""){
       tag.value = "请输入关键字";
      }
     }
    </script>
   </body>

   样式操作
    className
    classList
     classList.add()
     classList.remove()
     obj.style.fontSize = '16px'
     obj.style.backgroundColor = 'red';
     obj.style.color ='red';
   属性操作
    attributes
    gsetAttribute
    removeAttribute
   创建标签添加到HTML中
    字符串形式
     function addElement(){
     var tag = "<p><input type='text'/></p>";
     document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
    }
    对象方式
     function addElement2(){
      var tag = document.createElement('input');
      tag.setAttribute('type','text');
      tag.style.fontSize = '16px';
      tag.style.color = 'red';
      var p = document.createElement('p');
      p.appendChild(tag);
      document.getElementById('i1').appendChild(p);
     }

   提交表单
    任何表情通过DOM都可以提交
    document.getElementById('ID').submit()
   其他
    console.log()
    alert
    var v = confirm(提示信息) true/false
    location.href
    location.href = " " 重定向
    location.href = location.href 《==》页面刷新
    var obj = setInterval(func(){

    },5000) /定时器
    clearInterval(obj); 关闭定时器

   this ,当前触发事件的标签*（调用该函数的标签）
    <input type='button' οnclick= 'Clickin(this)'>
     function Clickin(self){
      //self
     }
    <input id= 'i1' type='button'>
    document.getElementById('i1').onclick = function(){
     //this
  }
作用域示例
<script>
        var tag =document.getElementsByTagName("tr");
        var len = tag.length;
        for(var i= 0;i<len;i++){
            tag[i].onmouseover = function(){
                this.style.backgroundColor = "red";
    //this=tag[i] 但是这里只能用this tag[i] 在被调通之前就已经创建完成
            }
            tag[i].onmouseout = function(){
                this.style.backgroundColor = "";
            }
        }
    </script>