初学js -3

BOM

• 浏览器对象模型
• 操作浏览器的一些能力
• 通常可以省略window

浏览器可视窗口的尺寸

宽高指的是 可视窗口 的宽高

• innerwidth
• innerheight

弹出层

会 阻塞后续代码执行

• window.alert ("xxx")
• confrirm("xxx") 询问框
  • 返回值 ture false
• prompt 输入框
  • 返回值 为 输入的 内容

地址栏

• loaction.href 地址
  • 会返回当前页面的地址
  • 重新赋值 会原地跳转到指定页面
• loaction.reload() 刷新

浏览器常见事件

• window.onload

  • 页面所有的资源都加载完后执行（图片 视频 dom）

  window.onload = function(){
      console.log("加载完成")
  }
  

• onresize

  • 窗口改变时

  window.onresize = function(){
      console.log("  ")
  }
  

• onscroll

  • 滚动条滚动时

  window.onscroll = function(){
      console.log("  ")
  }
  

滚动距离

window.onscroll = function(){
    console.log(document.documentElement.scrollTop)
}
// 打印的是滚上去的距离
// 如果 HTML开头没写dovtype（低版本浏览器不支持）则要改成document.body.scrollTop)
// 兼容性写法
window.onscroll = function(){
    console.log(document.documentElement.scrollTop || document.body.scrollTop)
}

// 横向
window.onscroll = function(){
    console.log(document.documentElement.scrollLeft)
}

• window.scrollTo()

  • 滚动到指定位置

    btn.onclick = function(){
        //1．两个数字
        window.scrollTo(0,0)
       
        //2．对象
        window.scrollTo({
        left:0,
        top:0
        })
    }
    
    

浏览器打开标签页

• window.open()

  • 在新标签页打开指定网页

  btn.onclick = function()i
    window.open( "http://www.baidu.com")
  }
  

• window.close()

  • 关闭自身网页

    btn2.onclick = function(){
        window.close()
    }
    
    

浏览器的历史纪录

• history.back

  • 返回前一个页面

    window.history.back()
    

• history.forword

  • 前进下一个页面

    window.history.forward()
    

• history.go()

  • 参数写数字 正数表示前进几个，负数表示后退几个

浏览器本地存储

• localStorage

  • 永久存储

  //增
  // 第一个是key 第二个才是要存的信息
  // 只能存字符串 不能存对象  要存就json
  1ocalstorage.setItem("name" , "kerwin")
  
  //取
  localstorage. getrtem( "name")
  
  //删
  localstorage.removertem("name")
  
  //清空
  1ocalstorage.clear()
  

• sessionStorage

  • 会话存储 关闭页面就丢失

  //增
  sessionstorage.setrtem("name " , "kerwin")
  
  //取
  sessionstorage. getItem("name ")
  
  //删
  sessionstorage.removeItem( "name ")
  
  //清空
  sessionstorage.clear()
  

初识DOM

• 文档对象模型
• 操作html中的标签的的一些能力
• 核心对象document对象
• document对象是浏览器内置的ige对象，里面存储专门操作元素的各种方法
• DOM:页面中的标签，我们通过js获取到以后，就把这个对象叫做DOM对象

获取元素的方式

• HTML

  • document. documentElement

• head

  • document.head

• body

  • document.body

• getElementById

  • 通过id获取
  • 只能获取到第一个id的对象

  var obox = document.getElementById( "box")
  obox.innerHTML = "22222"
  

• getElementByClassName

  • 通过calss名获取

    var items = document.getElementsByclassName("newsitem")
    // 获取到的items 只是 伪数组
    // 能用索引 有length
    items[0].innerHTML = "xxx"
    // 利用length for循环
    for(var i=0;icitems. length;i++){
        items[i].innerHTML = "news-"+i
    }
    // 转成数组
    // set => Array.from
    var newitems = Array.from( items)
    
    

• getElementsByTagName

  • 通过标签名获取

    var items = document.getElementsByTagName( "li")
    
    

• getElementsByName

  • 通过name

  • 返回伪数组

    var item = document.getElementsByName( ( "username")
    item[0].value = "kerwin"
    
    

• querySelector

  • 旧版浏览器可能不兼容

  • 通过css选择器

  • 返回一个对象，遇到的第一个

    var item = document.querySelector("ul 1i")
    
    

• queryselectorAll

  var items = document.querySelectorAll("ul li.newsitem")
  
  
  

操作元素属性

• 操纵原生属性

  <body>
      <div id="box" kerwin="hello">hello </div>
    <input type="text" value="hello" id="username">
    <input type="checkbox" checked id="rember" />
    <img src="" alt="" id="photo">       
      <script>
        box.innerHTML = "22222"
        username.type = "password"
        rember.checked = false
        photo.src = ""
  
      </script>
  </body>
  
  

• 自定义属性

  // 增加 改动
  // setAttribute
  box.setAttribute( "tiechui " ,"222222")
  
  // 删
  // removeAttibutel
  box.removeAttribute( "tiechui")
  
  // 获取
  // getAttibute
  console.log(box.getAttribute( "tiechui" ))
  
  // 使用场景
  var oitems = document.getElementsByTagName( "li")
  for(var i=0;i<oitems. length;i++){
    oitems[i].setAttribute( "kerwinindex",i)
  }
  
  

  //h5 ===>约定 data-******.dataset
                                    
  <body>
    <ul>
        <li >1111</li>
          <li >2222</li>
          <li >3333</li>
    </ul>
    <div id="box2" data-kerwin="hello"Idate-tiechui="hello2" > </div>
    <script>
          // 获取
          // 返回一个对象
          box2.dataset
          
          // 设置
        box2.dataset.xiaoming = "hello3"
          
          // 删除
        delete box2.dataset.xiaoming
        delete box2.dataset.kerwin
        delete box2.dataset.tiechui
  
        // for给li加上自定义属性
        var oitems = document.getElementsByTagName("li")
        for (var i = 0; i < oitems.length; i++){
            oitems[i].dataset.index = i
        }
    </script>
  </body>
  
  

操纵元素文本内容

• innerHEML

  • 获取里面所有的内容 =会把里面内容全改为赋值的内容 +=增加新内容

  • 可以解析html 可以写标签

• innerText

  • 获取的只有文本
  • 不解析html 写不了标签

• value

  • 表单标签
  • 可以获取 可以赋值

操作元素样式

• .style.

  • 只能获取行内样式方法

    <head>
        <style>
            #box{
                height: 100px;
                background-coLor: yellow;
            }
    
        </style>
    </head>
    <body>
        <div id="box" style="width: 100px;color:black;">11111</div>
        <script>
            // 获取宽度
            console.log(box.style.width)
            
            //background-color 这种有 - 的为复合属性  用 中括号 或者 驼峰写法
            console.log(box.style["background-color"])
            console.log(box.style.backgroundColor)
        </script>
    
    </body>
    

  • 赋值 即可 改变样式

• getcomputedStyle

  • 内部群式，外部样式，行内样式 都可以获取

  • 但不能 写 只能读

    var obox = document.getElementById( "box")
    
    var res = getComputedStyle(obox).color
    
    // 复合属性
    var res = getComputedStyle(obox)["background-color"]
    var res = getComputedStyle(obox).backgroundColor
    
    console.log(res)
    
    

• .currentStyle.

  • ie低版本

操作元素类名

• .className

  • 会重复

  <body>
    <div id="box" class="item item1 item2"></div>
      <script>
        // 获取
        console.log(box.className)
          
        // 修改
        box.className = "item item2"
          // 追加
        box.className += "item3"
      </script>
  </body>
  
  
  

• classList

  • 得到一个数组
  • 不会重复

  // 增加
  box.classList.add("item2")
  
  // 删除
  box.classList.remove("item2")
  
  // 切换  如果有就删掉 没有就加上
  box.classList.toggle("item2")
  
  

DOM节点

• 一般分为常用的三大类 元素节点/文本节点/属性节点

  • 比如，通过各种方法获取到的我们叫做元素节点(标签节点)

  • 标签里写文字，就是文本节点

  • 写在标签的属性，就是属性节点

  • 注释节点

• getElementBy

  • 获取元素节点

• getAttribute

  • 获取属性节点

• innerText

  • 获取文本节点

获取节点的方式

• childNodes

  • 获取 所有节点（元素 文本 注释）

    console.log(box.childNodes)
    

• children

  • 所有 元素（元素）

    console.log(box.children)
    

• firstChild

  • 第一个孩子节点

    console.log(box.firstChild)
    

• firstElementchild

  • 第一个元素节点

    console.log (box.firstElementchild)
    

• lasttChild

  • 最后一个孩子节点

    console.log(box.lasttChild)
    

• lastElementchild

  • 最后一个元素节点

    console.log (box.lastElementchild)
    

• previousSibling

  • 上一个节点

    console.log (box.previousSibling)
    

• previousElementsibling

  • 上一个元素节点

    console.log (box.previousElementsibling)
    

• nextSibling

  • 下一个节点

    console.log (box.nextSibling)
    

• nextElementSibling

  • 下一个元素节点

    console.log (box.nextSibling)
    

• parentNode

  • 父节点

  • 能找到document节点

    console.log (box.parentNode)
    

• parentElement

  • 父元素节点

  • 不能找到document节点

    console.log (box.parentElement)
    

• getAttribute

  • 获取指定属性节点

    console.log (box.getAttribute( "index"))
    

• attributes

  • 获取所有属性节点 数组

    // 所有 返回数组
    console.log (box.attributes)
    
    // 指定
    console.log (box.attributes[0])
    

节点操作

• createElement

  • 创建一个元素节点

    var odiv = document.createElement( "div")
    // 插入内容
    odiv.innerHTML ="我是新创建的节点"
    
    

• appendchild

  • 追加元素节点

    box.appendchild(odiv)
    
    // 修改样式
    odiv.className = "aaaa"
    odiv.id="aaa"
    odiv.style.background= "yellow"
    
    

• insertBefore

  • 在。。。之前插入

  • (要插入的节点，谁的前面）

    box.inseriBefore(odiv,child)
    
    

• removeChild

  • 删除节点(节点对象)

    box.removeChild(child)
    

• remove()

  • 删除自己以及后代

    box.remove()
    

• replacechild

  • 替换节点

  • (新的节点,老的节点)

    box.replacechild (odiv2,child)
    

• cloneNode

  • 克隆节点

  • 不写参数为false 不克隆后代

  • 传入参数 true 克隆后代

    var oCloneBox = box.cloneNode(true)
    
    

节点属性

• nodeType

  • 元素返回1

  • 属性节点返回2

  • 文本节点返回3

    obx.childNodes[i].nodeType === 1
    

• nodeName

  • 元素返回大写标签名
  • 属性返回属性名
  • 文本返回#text
  • 注释返回comment

• nodeValue

  • 元素返回null
  • 属性返回属性值
  • 文本返回文本内容

获取元素尺寸

• offsetWith

  • 获取的是元素 内容+paddin+border 的宽度

• offsetHeight

  • 获取的是元素 内容+paddin+border 的高度

• clientWidth

  • 获取的是元素 内容+padding 的宽度

• clientHeight

  • 获取的是元素 内容+padding 的高度

注意

• 以上获取到的是数字 没有单位
• display:none 拿不到 获取到的是 0

获取元素偏移量

• offsetLeft
• offsetTop

参考点：遇到的第一个有定位的父级 都没有就是相对于body

console.log(child.offsetLeft,child.offsetTop)

• clientLeft
• clientTop

获取的是边框的宽度

console.log (list.clientLeft,list.clientTop)

获取可视窗口的尺寸

• document.documentElement.clientWidth
• document.documentElement.clientHeight

不算 滚动条的