zoukankan      html  css  js  c++  java
  • HTML DOM 知识点整理(一)—— Document对象

    一、DOM对象

    DOM对象整体包括:

    • HTML DOM Document对象
    • HTML DOM 元素对象
    • HTML DOM 属性对象
    • HTML DOM 事件对象
    • HTML DOM Console 对象
    • CSS Style Declaration 对象

    二、 Document对象详解

    HTML DOM Document对象

    document对象是HTML文档的根节点,可以使我们从脚本中对HTML页面中的所有元素进行访问。

    提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

    三、Document对象的属性和方法:

    1.document.activeElement 属性

    var x = document.activeElement.tagName;
    console.log(x); 
    //BUTTON

    提示: 为元素设置焦点,可以使用 element.focus() 方法。

    function getfocus() { 
        document.getElementById("myAnchor").focus();
    }
    
    function losefocus() {
        document.getElementById("myAnchor").blur();
    }

    提示:可以使用 document.hasFocus() 方法来查看当前元素是否获取焦点。hasFocus() 方法返回布尔值,用于检测文档(或文档内的任一元素)是否获取焦点。

    2.document.addEventListener(eventfunctionuseCapture) 方法

    参数值:

    参数 描述
    event

    必需。描述事件名称的字符串。

    注意:不要使用“on”前缀。例如,使用“click”来取代“onclick”。

    function 必需。描述了事件触发后执行的函数。
    useCapture

    可选。布尔值,指定事件是否在捕获或冒泡阶段执行。

    可能值:

    • true - 事件句柄在捕获阶段执行
    • false - 默认。事件句柄在冒泡阶段执行

    document.addEventListener() 方法用于向文档添加事件句柄,因为是2级DOM,因此可以多次添加。

    document.addEventListener("mouseover", myFunction);
    document.addEventListener("click", someOtherFunction);
    document.addEventListener("mouseout", someOtherFunction);

    跨浏览器解决办法:

    如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。

    if (document.addEventListener) {                //所有主流浏览器,除了 IE 8 及更早 IE版本
        document.addEventListener("click", myFunction);
    } else if (document.attachEvent) {             // IE 8 及更早 IE 版本
        document.attachEvent("onclick", myFunction);
    }

    提示: 可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

    提示:使用 element.addEventListener() 方法为指定元素添加事件句柄。

    // 向 <div> 元素添加事件句柄
    document.getElementById("myDIV").addEventListener("mousemove", myFunction);
    
    // 移除 <div> 元素的事件句柄
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

    3.document.adoptNode(node) 方法 (3级DOM元素)

    参数类型描述
    node  Node 对象 必须。另外一个文档的节点,可以是任何节点类型。

    adoptNode() 方法用于从另外一个文档中获取一个节点。

    节点可以是任何节点类型。

    var frame = document.getElementsByTagName("IFRAME")[0]
    var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
    var x = document.adoptNode(h);

    注意: 节点下的所有子节点都会获取到。

    注意: 节点及其子节点会再源文档中删除。

    提示: 使用 document.importNode() 方法来拷贝节点,但原文档中的节点不删除。.

    提示: 使用 element.cloneNode() 方法来拷贝当前文档的节点,且节点不会被删除。

     ——  待续  ——

  • 相关阅读:
    开发体系规范建议
    centos安装samba
    【OF框架】在部署中使用 Windows身份认证
    【OF框架】使用OF.WinService项目,添加定时服务,进行创建启动停止删除服务操作
    【OF框架】定义框架标准WebApi,按照规范返回状态信息及数据信息
    【OF框架】使用IDbContextTransaction在框架中对多个实体进行事务操作
    【OF框架】新建库表及对应实体,并实现简单的增删改查操作,封装操作标准WebApi
    【OF框架】框架Cache/Session在负载均衡部署时,切换Memory/Redis测试
    【OF框架】在Visual Studio中启用Docker支持,编译生成,并在容器运行项目
    【OF框架】在Visual Studio中发布Docker镜像,推送镜像到Azure容器注册表
  • 原文地址:https://www.cnblogs.com/bbcfive/p/10041125.html
Copyright © 2011-2022 走看看