2020.4.16 dom

发布于 2020-04-16  70 次阅读


1.复习内容

2.灵感代办

  • JavaScript变量作用域复习

  • 一定要注意代码执行渲染的顺序

3.学习内容

  • BOM

    • window对象的属性

      • history

        • 提供操作历史记录的方法(后退,前进)
        • 只是当前窗口的历史记录
        • 属性:length

          • 保存当前窗口访问过的历史记录数量
        • 方法

          • back() 后退
          • forward() 前进
          • go(n) 正值前进n条,负值后退n条
        • 使用:

          • 超链接修改地址的url,会增加历史记录
          • 前进和后退不会增加历史记录,是指针的指向改变
        • 历史记录的进出栈

          • 后退按钮不会操作栈
          • 后退之后产生新的跳转会清栈(清除后退的栈)
      • location

        • 保存当前窗口的地址栏信息
        • 属性 :href
          • 可读可写,读取或者设置当前窗口的URL
        • 方法:reload(false)
          • 功能:重载页面,刷新页面
          • 默认false,优先从缓存加载
          • 设置true,则强制从服务器目录请求
      • windows中 on开头的?

        • 都是事件
  • DOM

    1. 文档对象模型:

      1. 提供操作HTML文档的方法,核心对象为document对象
    2. 节点对象:

      1. JS对HTML文章中的标签,文本,属性,甚至注释都封装成对象,提供操作的方法
    3. 分类:

      1. 元素(标签,包含了文本和属性),文本(文本内容),属性(标签属性),注释,文档
    4. 获取元素节点

      1. 根据标签名获取列表(返回节点列表)

        document.getElementsByTagName(“h1”);

      2. 根据类名获取列表(返回节点列表)

        document.getElementByClassName(“c1”);

      3. 根据那么属性值获取节点列表(返回节点列表)

        document.getElementsByName();

      4. 根据id属性值获取元素

        document.getElementById();

    5. 操作元素内容,

      • innerHTML: 用来读取设置元素节点的内容,可以识别标签语法
      • innetText: 不能识别标签语法
      • value:读取或者设置表单中的值
    6. 操作元素属性,

      1. 直接操作对象
        1. 简化,定义一个方法:$
        2. 直接赋值 id=“id” className=”“”; (class需要更名)
        3. 移除属性:赋空值“”,null(会显示出来,remove置空,看不见)
      2. 元素对象提供相关方法操作标签(class不需要更名)
        1. setAttribute(“attrName”,”value”)
        2. getAttribute(“attrName”)
        3. removeAttribute(“attrName”);
    7. 操作元素样式

      1. 通过操作id和class属性,对应选择器的样式
      2. 操作行内样式,操作style属性(动态操作常用)
        1. 字符串格式(和标签中写法一样)覆盖了css样式表中属性 style = “width:200px”;
        2. 对象格式 p.style.width = 200px;
        3. 所有出现连接符的属性都由-改为了驼峰,编程语言中(-是运算符号)

          font-size == fontSize()

    8. 元素节点的层次属性

      1. 获取父元素
        • parentNode()
      2. 获取子元素列表
        1. 属性值、
          • nodeName,nodeValue
          • nodeType:1:标签元素,2:属性,3:文字
          • childNodes 可以拿到标签内的文本节点,元素
          • children 常用,获取子元素,不包含文本节点
      3. 获取下一个兄弟节点
        • nextSibling(带文字节点)
        • nextElementSibling
      4. 获取上一个兄弟节点
        1. previousSibling(带文字节点)
        2. previousElementSibling
      5. 获取节点属性
        1. attributes 获取属性节点列表
    9. 节点的创建,添加,删除
      1. 创建节点
        1. createElement(“h1”); 返回创建好的元素节点
      2. 节点添加
        1. 节点的添加删除只能父元素操作
        2. 添加在父元素的末尾parentNode.appendChild(element)
        3. 指定位置添加parentNode.insertBefore(new,old)在已有位置插入新节点
        4. body作为document的属性存在,可以直接访问
        5. 一个节点,对应一个标签,多个标签,需要创建多个节点
        6. 文本节点:createTextNode()也是一个节点,需要追加到一个父节点之后,比如H1,H2
      3. 节点删除
        1. removeChild() 节点名称
  • DOM事件处理

    • DOM事件介绍:

      • DOM事件:

        • 指的是用户的行为或元素的状态
      • DOM事件处理:

        • 元素去监听事件,事件发生后进行处理
      • 常用事件分类(on开始,全部都是小写)

        • 鼠标事件

          • onclick
          • ondblclick
          • onmouseover(鼠标移入)
          • onmouseout(鼠标移出)
          • oumousemove(鼠标移动)
        • 键盘事件
          • onkeydown 按下
          • onkeyup 抬起
          • onkeypress 字符按键被按下(fn shift 等不包括)
        • 文档,窗口或元素加载完毕
          • onload()
      • 事件绑定方式
      • 内联绑定:在元素上写明
      • 动态绑定:取到元素,动态添加

4.扩展延伸知识

5.知识内容个人梳理

6.今天都复习了之前的什么内容


Ares个人进阶之路