• JS加强学习-DOM学习总结


    1. DOM复习

     DOM:document object model  文档对象模型或文档树模型。

    1.1 节点分类

    DOM中一共有5个节点类型,而现在我们常用的有三种:标签(元素)节点,属性节点,文本节点。

    我们可以通过nodeType获取节点的类型(一个数字),通过nodeName获得节点名,通过nodeValue获得节点的值。

    1.2 获得页面元素的三种方式

    document.getElementById:通过标签的id值获得元素。

    document.getElementsByTagName:通过标签名获得元素。

    document.getElementsByClassName:通过标签的类名获得元素,但是由于这个方式存在很大的兼容性问题,所以不建议使用。

    1.3 事件

    事件:就是用户在文档或是浏览中交互的某个瞬间。

    常用的事件有:

    鼠标事件: onclick鼠标单击事件,ondblclick鼠标双击事件,onmouseover鼠标移入事件,onmouseout鼠标移出事件,onmousemove鼠标移动事件,onfocus获得焦点事件,onblur失去焦点事件。

    键盘事件: onkeydown键盘某个按键被按下时,onkeyup键盘某个按键被按下并放开时。

    注册事件方式:on+事件名。

    注册事件的位置: 行内式、内嵌式。

    1.4 事件三要素

    事件源:事件作用的对象。

    事件名称:具体的交互瞬间。

    事件处理程序:事件触发时要执行的代码。

    在事件处理程序中,常会使用this来始终指代当前触发事件的那个对象。

    1.5   节点层次

    获取父级节点parentNode

    获取子级节点childNodes    children(只会获取标签节点)

    获取同级节点: nextSibling下一个同级节点,nextElementSibling下一个同级元素节点,previousSibling上一个同级节点,previousElementSibling上一个同级元素节点。

    父元素的第一个子节点和最后一个子节点:firstChild,firstElementChild,lastChild,lastElementChild。

    节点操作:

    克隆节点:  cloneNode(true/false);

    追加节点: appendChild;

    移除节点: removeChild ;

    插入节点:  insertBefore。

    1.6 自定义属性

    setAttribute设置自定义属性,getAttribute获得已设置的自定义属性,removeAttribute移除自定义属性。

    1.7 动态创建元素:

    document.write():由于当document.write会将原有的文档流移除后再次进行渲染,所以不建议使用。

    innerHTML:通过赋值的形式将字符串渲染成HTML中的标签。

    document.createElement():创建一堆标签。

  • 相关阅读:
    linux学习25 运维加薪技能-Linux特殊权限及facl扩展
    linux学习24 Linux运维必备技能-文件查找命令企业级应用
    linux学习23 Linux运维必备技能-vim编辑器高效用法进阶
    linux学习22 Linux运维必备技能-vim编辑器深入讲解
    linux学习21 运维核心节能-egrep进阶及文本处理工具应用
    linux学习20 运维核心技能-grep命令与基本正则表达式
    【Hadoop离线基础总结】关键路径转化率分析(漏斗模型)
    【Hadoop离线基础总结】Hive级联求和
    【Hadoop离线基础总结】hive的窗口函数
    【Hadoop离线基础总结】网站流量日志数据分析系统
  • 原文地址:https://www.cnblogs.com/chendu/p/5762950.html
Copyright © 2020-2023  润新知