【嘉兴东臣php】DOM+BOM

最新推荐文章于 2024-09-27 16:14:02 发布

chengkuang3335

最新推荐文章于 2024-09-27 16:14:02 发布

阅读量127

点赞数

文章标签： php

原文链接：https://my.oschina.net/xubucong/blog/548222

版权

又是一周过去了，在这过去的一周时间里我们学习了DOM和BOM。BOM还好说一点，只要识别一些常用的东西就行了，比如screen、navigator、location、history等。还有读数setTimeout、setInterval、clearTimeout、clearInterval，这个比较好玩。DOM就比较晕了，一开始比较正常，后面来了一个节点不节点的。一开始根本无法理解这东西，反正刚刚接触是完全不懂的，每天看每天练，终于是明白了些什么。还有Node,document的用法,事件的注册方法addEventListener、基本的事件onclick等等的东西。还有表单<form>的用法。学的还是比较充实的，玩游戏的时间大大减少了，这是好事情，比较一直玩游戏就不知道将来是干什么的了。

BOM：针对于浏览器操作的结构模型
     1、history ：例如：history.go(-1) 上一级页面
     2、location ：例如：location.href="网址";当前窗口跳转页面
     3、open : 例如：open("网址") 新窗口打开网址
     4、close : 例如：window.close() 关闭当前窗口
    5、setTimeout( 代码片段，执行时间(毫秒) ); 定时器
     6、setInterval( 代码片段，定时调用的间隔时间(毫秒))
  window:

window.screen.width
window.screen.height 屏幕的分辨率

DOM:

针对于文档结构模型。

1、节点：每一个HTML都有节点，节点就是元素。
    节点的类型：
    1、父节点( parentNode )
    2、子节点( child )
      第一个子节点：firstChild/firstElementChild
      最后一个子节点：lastChild/lastElementChild
    3、兄弟节点
      前一个兄弟：previousSibling
      后一个兄弟：nextSibling

2、属性：得到某一个自定义属性的值
    document.getElementById("id").getAttribute("属性名")

   设置某一个自定义属性的值
    document.getElementById("id").setAttribute("属性名","属性值")

返回属性数组
document.getElementById("id").attributes

事件: 其实就是交互的一个响应动作。

  onclick 点击事件
  onblur 失焦事件
  onfocus 聚焦事件
  onkeyup 键盘释放事件
  onkeydown 键盘按下事件
  onchange 改变值的失焦事件
  onsubmit 表单提交事件
  onreset 表单重置事件
  onmouseover 鼠标移入事件
  onmousemove 鼠标移动事件

函数：其实就是一个代码片段

var abc = function(){

}

function abc(){

}

表单：<form> 用于提交表单内输入的信息。
  action: URL地址
  method：GET POST
   GET：
    URL为明文也就是显示在地址栏里
    相对不安全
    长度是有一定的限制的。

   POST：
    URL为密文
    相对安全
    长度相对没有限制

  name：
  enctype：支持文件上传

内部标签：
  <input type="text"/> 单行文本框
  <input type="checkbox"/> 复选框
  <input type="submit"/> 提交按钮
  <input type="button"/> 按钮
  <input type="password"/> 密码框
  <input type="radio"/> 单选框
  <input type="reset"/> 重置按钮
  <input type="hidden"/> 隐藏框
  <button></button> 按钮
  <select><option value="1">AAA</option></select> 下拉菜单
  <textarea></textarea> 富文本 cols 列 rows 行

  disabled 不可用 readonly 只读