• DOM_02之查找及元素操作


    1、查找之按节点间关系查找周围元素;

    2、查找之HTML属性:①按id查找:var elem=document.getElementById(“id”);找到一个元素,必须document调用;②按标签名:var elems=parent.getElementsByTagName(“标签名”);在指定父元素下查找指定标签名元素,查找所有子代节点;③按name属性:var elems=parent.getElementsByName(“name”);指定父元素下查找指定name属性的元素;④按class类:var elems=parent.getElementsByClassName(“class”);指定父元素下查找指定class属性的元素;*(* 若getElementsXXX未找到,返回空集合【】;);

    3、查找之选择器:①只查找一个符合选择器要求的元素:var elem=parent.querySelector(“selector”);②查找多个符合选择器要求的元素:var elem=parent.querySelectorAll(“selector”);未找到返回空集合【】;

    4、查找之getXXX与querySelector区别:getXXX:代码繁琐,但执行效率高;querySelector:代码简单,返回内容包含完整属性集合,故执行效率慢;

    5、操作内容:①elem.innerHTML:开始标签到结束标签的html内容;②elem.textContent:开始标签到结束标签的文本内容(不包含html标签);

    6、操作属性之核心DOM:(万能);①访问属性节点对象:var node=elem.attributes【i/“属性名”】;或:var node=elem.getAttributeNode(“属性名”);属性值:node.value;②获得属性值:var value=elem.getAttribute(“属性名”);③修改属性值:elem.setAttribute(“属性名”,“值”);④移除属性:elem.removeAttribute(“属性名”);⑤判断是否包含指定属性:var bool=elem.hasAttribute(“属性名”);

    7、操作属性之HTML DOM:将html标准属性封装到元素对象中:elem.属性名;*(* 仅能访问HTML标准属性);

    8、操作属性之自定义属性:①核心DOM万能;②HTML5中:定义自定义属性时,data-属性名=“值”;读取自定义属性时,elem.dataset.属性名;

    9、属性之property与attribute区别:①attribute:显式写在开始标签中;getAttribute只能获得页面上显式定义的属性值;②property:在内存对象里保存;*(*自定义属性不属于);

    10、无属性值属性:获得复选框中选中状态的checked,不能使用getAttribute,须使用elem.checked;

    It's never too old to learn!
    转载
  • 相关阅读:
    浅谈移动端设备标识码:DeviceID、IMEI、IDFA、UDID和UUID
    Linux下的crontab定时执行任务命令详解
    SHOW INDEX查询MySQL表索引
    Vue非父子组件传值方式。
    windows 双网卡 内外网上网配置说明
    战神引擎部署备注说明
    k8s service直接暴露外部访问配置
    Kubernetes 五种资源控制器详细介绍以及功能演示(转)
    docker网络
    在Linux服务器,一键搭建K8s服务【脚本篇】(转)
  • 原文地址:https://www.cnblogs.com/lianzhibin/p/6052668.html
Copyright © 2020-2023  润新知