前端知识——JavaScript&DOM对象&BOM对象&事件

2019-07-05  本文已影响0人  So_ProbuING

DOM 文档对象模型

Document Object Model

分类

W3C DOM 标准：

对象

核心DOM对象

Document：文档对象

  1. 创建/获取
    1. window.document（在html dom模型中可以使用window对象来获取）
    2. document
  2. 方法
    1. 获取Element对象：
      1. getElementById()：根据id属性值获取元素对象，id属性值一般唯一
      2. getElementsByTagName(): 根据元素的名称获取元素的对象们 返回一个数组
      3. getElementsByClassName()：根据Class属性值获取元素对象们，返回一个数组
      4. getElementsByName(): 根据name属性值获取元素对象们，返回一个数组
    2. 创建其他DOM对象：

      1. createAttrbute(name)

      2. createComment()

      3. createElement():

      4. ctreateTextNode()

  3. 属性

Element 元素对象

页面中的标签(元素)都封装为对象，称为Element

  1. 获取/创建
    通过document对象获取和创建
document.getElementById("id值");
  1. 方法属性
    1. removeAttribute()：删除属性
document.getElementsByTagName("H1")[0].removeAttribute("style");
  1. setAttribute()：设置属性
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
  1. value 获取Element标签的value值

Node：节点对象

所有的dom对象都可以被认为是一个节点Node

  1. 方法
  1. 属性

HTML DOM

  1. HTML标签体的设置和获取：innerHtml

    1. 获取
    <div id="div1">
  div
</div>
<script>
  var divTag = document.getElementById("div1");
  var innerHTML = divTag.innerHTML;
  alert(innerHTML);

  </script>

    2.添加/替换

      //将div标签替换为文本输入框
  divTag.innerHTML = "<input type='text'>";

  2. 使用HTML元素对象的属性

  3. 通过HTML DOM 控制元素样式
    1.使用元素的style属性来设置

    var div1 = document.getElementById("div1");
  div1.onclick = function () {
  div1.style.border = "1px red solid";
  //样式2
  div1.style.width = "200px";
}

    2.提前定义好类选择器的模式，通过元素的className属性来对应style

      <style>
  .d1 {
      border: 1px solid red;
  }

  .d2 {
      border: 2px solid blue;
  }
</style>
var div2 = document.getElementById("div2");
  div2.onclick = function(){
  div2.className = "d2";
}

事件

概念

某些组件被执行了某些操作后，触发某些代码的执行

常见的事件

点击事件

焦点事件

加载事件

鼠标事件

键盘事件

选择和改变

表单事件

绑定事件

  1. 直接在html标签上，指定事件的属性，属性值为js代码
<img id="light" src="img/off.gif" onclick="alert("onClick");">
  1. 通过定义函数绑定
<script>
var light = document.getElementById("light")
light.onClick = function(){
  alert("onClick");
}
</script>
<img id="light" src="img/off.gif" onclick="alert("onClick");">

BOM 对象

概念 Browser Object Model

将浏览器的各个部分封装为对象

分类

  1. 创建
  2. 方法
    1. 与弹出框有关的方法
      1. alert() 显示带有一段消息和一个确认按钮的警告框
      2. confirm() 确认取消对话框，显示带有一段消息以及确认按钮和取消按钮的对话框
      • 如果用户点击确定，则方法返回true
      • 如果用户点击取消，则方法返回false
      1. prompt(): 显示可提示用户输入的对话框
      • 返回值是用户输入的值
    2. 与关闭有关的方法
      • close() 关闭浏览器窗口
        • 关闭当前调用的window窗口
      • open() 打开新窗口 可以传参指定打开的新窗口的地址
        • 返回新的窗口对象 window
    3. 与定时器有关的方法
      • setTimeOut() 在指定的毫秒数后调用函数或计算表达式,返回计时器的编号
      • clearTimeout() 取消由setTimeOut方法设置的timeOut
      • setInterval() 按照指定的周期来调用函数或计算表达式
      • clearInterval() 取消由setInterval设置的timeout
  1. 属性
    1. 获取其他BOM对象 history location navigator screen
    2. 获取DOM对象 document
  2. 特点
    • window对象不需要创建可以直接使用 window使用 window.方法名()
    • window引用可以省略 方法名()

  1. 创建

    1. window.location
    2. location

  2. 方法

    • reload() 重新加载当前文档

  3. 属性

    • href 设置或返回完整的url
上一篇 下一篇

猜你喜欢

热点阅读