day6 原生js操作

一 DOM操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>节点操作</title>
    </head>
    <body>
        <p class="c1" id="p1">我是段落1</p>
        <img class="c1" src="img/luffy.jpg"/>
        <div id="div1">
            我是div
            <p>我是段落2</p>
        </div>
        <div id = 'div2'>
            <h1>我是标题1</h1>
            
        </div>
        
        
        <script type="text/javascript">

            //1.获取节点
            //1.1直接获取
            //a）通过id值来获取节点：document.getElementById(id属性值)---返回值是标签对应的节点值
            //补充：html标签在js全部是对象，标签的属性就是对象的属性，双标签的内容对应的是（innerHTML，innerText）
            // innerhtml指向的是内容的文本和标签；innertext只指向文本
            pNode=document.getElementById('p1')
            console.log(pNode, typeof(pNode),pNode.id,pNode.innerHTML)
            
            divNode=document.getElementById('div1')
            console.log(divNode)
            console.log(divNode.innerHTML)
            //我是div
            //<p>我是段落2</p>
        
            console.log(divNode.innerText)
            //我是div
            //我是段落2
            
            //b)通过class值获取节点---document.getElementsByClassName(class属性值)---返回值是数组
            c1NodeArray=document.getElementsByClassName('c1')
            console.log(c1NodeArray)
            //根据下标获取元素
            imgNode=c1NodeArray[1]
            imgNode.title='路飞'
            
            //c）通过标签名获取节点：document.getElementsByTagName(标签名)---返回值是数组
            pNodes=document.getElementsByTagName('p')
            console.log(pNodes)
            
            //d)通过name属性获取节点（被淘汰了）：document.getElementsByName(name属性)
            // document.getElementsByName()
            
            //1.2获取父节点
            //节点.parentElement   ---获取指定节点对应的父节点
            bodyNode=pNode.parentElement
            console.log(bodyNode)
            
            //1.3获取子节点
            //a）获取所有的子节点：节点.children---获取指定节点所有的子节点（不会获取孙子节点）
            children=bodyNode.children
            console.log(children)
            
            //b.获取第一个子节点：节点.bodyNode.firstElementChild
            firstNode = bodyNode.firstElementChild
            console.log(firstNode)
            
            //C)获取最后一个子节点:节点.bodyNode.lastElementChild
            lastNode = bodyNode.lastElementChild
            console.log(lastNode)
            
            
            //2.创建节点
            //document.createElement(标签名)  --- 创建指定标签对像的节点对象
            //注意：创建的节点在没有添加到网页中的时候是不会显示的
            inputNode=document.createElement('input')
            
            //3.添加节点
            div2Node = document.getElementById('div2')
            //节点1.appen（节点2）--在节点1后面添加节点2
            div2Node.appendChild(inputNode)
            //节点1.insertBefore（节点2，节点3）在节点1下面的节点3前面插入节点2
            div2Node.insertBefore(inputNode,div2Node.firstElementChild)
            
            //4.拷贝节点
            //节点.cloneNode（）---- 赋值指定节点，产生一个新的节点
            inputNode2 = inputNode.cloneNode()
            inputNode2.placeholder='新节点'
            div2Node.appendChild(inputNode2)
            
            //5.删除节点
            //a）节点1.removeChild（节点2）  -- 删除节点1中的节点2
            div2Node.removeChild(div2Node.firstElementChild)
            
            //b）节点.remove（）--删除指定节点
            div2Node.remove()
            
            
        </script>
    </body>
</html>

二 BOM操作

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>BOM操作</title>
  </head>
  <body>
      <!--<div id=""style="background-color: yellow;height: 5000px;" ></div>-->
  </body>
</html>
<script type="text/javascript">
  //1.什么是BOM
  //BOM（browser object model）浏览器对象模型
  //js自带一个window对象，指向当前浏览器；js中所有的全局变量都是绑定在window对象上的属性
  //在使用的时候window可以省略
  num=10   //相当于window.num=10
  console.log(window.num,num)
  
  function func1(){
      console.log('我是函数')
  }
  window.func1()
  //2.window的羁绊操作
  //open（url，name属性，窗口大小）
  //a）打开新的窗口:open(url)--在新的窗口打开新页面
//  new_window=window.open('https://www.baidu.com')
//  console.log(new_window)
  //b）打开新的窗口，同时设置窗口的高度和宽度
//  new_window2=open('','','width=400,heigth=400')
  
  //2）关闭窗口
  //窗口对象.close
  //window.close()/close   ---关闭当前窗口
//  close()
  
  //3）移动窗口
//  new_window2.moveTo(200,200)
  
  //4)获取窗口的宽度和高度
  //innerwidth、innerheigth--获取浏览器能够显示的宽高。
  console.log(window.innerWidth,window.innerHeight)
  //获取浏览器的宽高
  console.log(window.outerHeight,window.Height)
  
  //3.弹框
  //1）只有确定按钮再加提示信息的弹框
  alert('提示信息！')
  
  //2）一个提示信息，再加上确定和取消按钮；根据返回值是ture还是死false来判断是确定还是取消
  confirm('是否删除')
  console.log()
  
  //3）一个提示信息再加一个输入框还有确定和取消按钮，根据返回值是否是null来判断点击的是取消还是确定
  result=prompt('提示信息1','提示信息2')
  console.log(result)
</script>

三 DOM中的定时事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
    </body>
</html>


<script type="text/javascript">
    //1.开启定时--setTimeout
    /*
     setTimeout(函数，定时事件，实参对象)   --指定时间后调用函数，并传入指定参数 
     函数---可以是匿名函数，也可以是普通函数名
     定时时间---单位是毫米
     实参对象---给函数提供参数
     */
    
    
    t1=setTimeout(function(){
        console.log('时间到')
    },1000)
    
    t2=setTimeout(function(name,age){
        console.log(name,age)
    },5000,'小明',10)
    
    function timeFunc(){
        console.log('你好')
    }
    
    t3=setTimeout(timeFunc,1000)
    
    /*
    setInterval(函数，定时时间，参数列表)---每隔指定的时间调用一次函数
    
     */
    num=1
//  t4=setInterval(function(){
//      
//      num++
//      console.log('-_-',num)
//      
//      if(num==10){
//          clearInterval(t4)
//      }
//  },1000)
//  
    
    
    //2.清除定时
    //clearTimeout（定时对象）
    clearTimeout(t2)
    
    //clearInterval(定时对象)
</script>

四 自动跳转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="p1">5秒后自动跳转</p>
        <script type="text/javascript">
            pNode=document.getElementById('p1')
            time=5
            t1 = setInterval(function(){
                time--
                if (time==0){
                    open('https://www.baidu.com')
                    clearInterval(t1)
                }
                pNode.innerText=time+'秒后自动跳转'
                
            },1000)
        </script>
        
    </body>
</html>

五 事件

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <!--事件绑定1      不推荐使用-->
       <button onclick="alert('你好')">按钮1</button>
       <button id='btn1' onclick="btnClick()">删除1</button>
       
       
       <!--事件绑定2-->
       <button class="btn1">删除2</button>
       <button class="btn1">删除3</button>
       <button class="btn1">删除4</button>
       <button id="btn3">删除5</button>
       <br /><br />
       <!--事件绑定3-->
       <button id="btn4">删除6</button>
       
       
       
       
       
       
       
   </body>
</html>
<script type="text/javascript">
   //js是事件驱动语言
   //1.事件三要素：事件源、事件、事件驱动程序
   //事件源发送某个事件就做什么事情（事件驱动程序）
   //2.事件的绑定
   //1）在标签内部给标签的事件属性赋值
   //注意：这种方式绑定，this指向的是window
   function btnClick(){
       console.log(this)
       result=confirmn('是否删除')
       if(result){
           document.getElementById('btn1').remove()
       }
       
   }
   //2）通过给节点对象的事件属性赋值来绑定
   //注意：这种方式绑定的时候，this指向的是window
   btnNode=document.getElementById('btn1')
   btnNode.onclick=btnClick
   
   btn1Node = document.getElementsByClassName('btn1')
   for(x=0;btn1Node.length;x++){
       btn1Node=btn1Node[x]
       //给事件属性赋匿名函数
       btn1Node.onClick=function(){
           console.log(this)
           result=confirm('是否删除')
           if(result){
               this.remove()
           }
       }
   }
   
   
   //3）通过addEventListener方法进行绑定
   /*
   a.语法 
    事件源节点.addEventListener(事件名称，事件驱动程序)
   b.说明
   事件名称----事件属性名去掉on
   事件驱动程序---事件发生后需要调用的函数
   c.注意
   this是事件源
   可以给同一个节点的同一个事件绑定不同的事件驱动程序
   
   */
   btnNode4=document.getElementById('btn4')
   btnNode4.addEventListener('click',function(){
       console.log(this)
       alert('你好')
   })
   
   btnNode4.addEventListener('click',function(){
       this.style.color='red'
   })
</script>

六 常见事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <script type="text/javascript">
            //1.onload事件--页面加载完成对应的事件（标签加载成功）
            onload=function(){
                //写在这儿的代码才会执行
                pNode=document.getElementById('p1')
                console.log(pNode)
            }
            
        </script>

        
        
    </head>
    <body>
        <p id = 'p1'>我是标题</p>
        <input id="input"/>
        <input type="" name="input2" id="input2" value="" />
    </body>
</html>

<script type="text/javascript">
    //2.鼠标事件
    pNode=document.getElementById('p1')
    //鼠标点击事件---onclick
    pNode.onclick=function(){
        alert('p标签被点击')
    }
    
    //2）onmouseover  ---鼠标悬停事件
    pNode.onmouseover=function(){
        //alert('鼠标在标签上')
        this.style='background-color:yellow'
    }
    //3）onmouseout  ---鼠标离开事件
    pNode.onmouseout=function(){
        this.style='background-color:red'
    }
    
    //3.键盘事件
    //键盘事件一般绑定在输入框对应的标签上
    //1）onkeypress
    inputNode=document.onkeypress=function(){
        console.log('键盘摁下弹起')
    }
    
    //2）onkeydown  ---按键按下       onkeyup  --按键弹起
    
    //4.输入框事件
    //onchange---输入框中的内容发生改变
    inputNode2=document.getElementById('input2')
    inputNode2.onchange=function(){
        console.log('内容发生改变')
    }
    
    //oninput--正在输入
    
    
    //5.事件对象
    //每个事件驱动程序中都可以设置一个参数来表示当前事件对象。不同类型的事件对应事件类型和事件属性不同
    //1）鼠标事件对象
    //cilentx/clienty---鼠标位置到浏览器左边和顶部的距离
    //offsetx/offsety---鼠标位置到事件源标签坐标和顶部的距离
    
    //2）键盘事件
    //key-那个按键被按下
    
</script>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 面试题
    Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,871评论 1赞 32
  • JS基础2-浏览器API
    一、API介绍 HTML：用来存储网页内容;CSS：用来定义这些内容的显示样式；JavaScript：用来创造丰富...
    宠辱不惊丶岁月静好阅读 7,154评论 0赞 4
  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,883评论 1赞 11
  • JavaScript高级程序设计-笔记
    第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型：Unde...
    RickCole阅读 10,690评论 0赞 21
  • 紫色蔷薇
    文/舸舸 纪伯伦说 每个男人心里都有两个女人 一个是他想象的作品 另一个还没出生 那么我很幸运 我想象中的...
    郭舸阅读 3,025评论 0赞 0

友情链接更多精彩内容