DOM笔记(三):Element接口和HTMLElement接口

DOM笔记(三):Element接口和HTMLElement接口

一、Element接口

     Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法。

     Element接口常见的属性比较少,常用的就是一个只读的tagName属性,该属性返回元素名,数据类型是DOMString。

     Element接口定义的方法也主要是针对属性操作,常见方法如下:

方法名 数据类型 说明
getAttribute DOMString 返回对应属性
getAttributeNode Attr 返回对应属性节点
getAttributeNodeNS Attr 返回属性命名空间
getAttributeNS DOMString 返回对应属性节点
getElementsByTagName NodeList 节点名获取元素列表
getElementsByTagNameNS NodeList 根据指定空间内的标签名搜索所有元素
hasAttribute Boolean 判断属性是否存在
hasAttributeNS Boolean 判断属性是否存在
removeAttribute void 删除属性
removeAttributeNode Attr 删除属性
removeAttributeNS void 删除属性
setAttribute void 添加属性
setAttributeNode Attr 添加属性节点
setAttributeNodeNS Attr 添加属性节点
setAttributeNS void 添加属性

 

二、HTMLElement接口

       该接口继承自Element接口,同样用于表示一个HTML元素,拥有自定义的属性和方法。

       1、属性列表

属性名 数据类型 只读 说明
innerHTML DOMString   获取或设置HTML内容
outerHTML DOMString   设置或获取对象的纯文本形式
id DOMString   对应元素的id属性
title DOMString   对应元素的title属性
lang DOMString   对应元素的lang属性
dir DOMString   对应元素的dir属性
className DOMString   对应元素的class属性
classList DOMTokeList Y 返回元素的class属性作为DOMTokenList对象
dataset DOMStringMap Y 返回自定义的data-*属性集合
hidden Boolean   对应元素的hidden属性
tabIndex long   对应元素的tabIndex属性
accessKey DOMString   对应元素的accessKey属性
accessKeyLabel DOMString Y 返回热键组合
draggable Boolean   对应元素的draggable属性
contentEditable DOMString   对应元素的contentEditable属性
isContentEditable Boolean Y 判断元素是否可用编辑
contextMenu HTMLMenuElement   对应元素的contextMenu属性
spellcheck DOMString   对应元素的spellcheck属性
commandType DOMString Y 对应元素的commandType属性
label DOMString Y 对应元素的label属性
icon DOMString Y 对应元素的icon属性
disabled Boolean Y 对应元素的disabled属性
checked Boolean Y 对应元素的checked属性
style CSSStyleDeclaration Y 对应元素的style属性

 

     2、方法列表

方法名 数据类型 说明
getElementsByClassName NodeList 根据元素的class属性获取所有元素
insertAdjacentHTML void 在指定位置插入HTML或XML
click void 单击元素,触发click事件
scrollIntoView void 滚动元素内容到视点内
focus void 元素获取焦点
blur void 元素失去焦点

转载于:https://www.cnblogs.com/ido321/p/4154602.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/109630.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • dropdownlist绑定数据_containsall方法

    dropdownlist绑定数据_containsall方法前台<asp:DropDownListID=”DDL_Gly”runat=”server”AutoPostBack=”True”OnSelectedIndexChanged=”DDL_Gly_Change”></asp:DropDownList><asp:HiddenFieldID=”hf…

    2022年9月11日
    0
  • 一步步入门log4cpp

    一步步入门log4cpp前言项目实现过程中,需要检查、查找或者调试程序bug等,此时程序日志则较为清晰地展现代码的运行过程。目前接触到的方法有打印消息到控制台,将重要信息输出到某个文件比如txt文件,或者直接使用日志库。

    2022年7月4日
    31
  • 文件锁的使用浅析_文件加密软件

    文件锁的使用浅析_文件加密软件概述在多数unix系统中,当多个进程/线程同时编辑一个文件时,该文件的最后状态取决于最后一个写该文件的进程。对于有些应用程序,如数据库,各个进程需要保证它正在单独地写一个文件。这时就要用到文件锁。文件锁(也叫记录锁)的作用是,当一个进程读写文件的某部分时,其他进程就无法修改同一文件区域。能够实现文件锁的函数主要有2个:flock和fcntl。早期的伯克利版本只支持flock,该…

    2022年4月19日
    61
  • Android URLEncoder

    Android URLEncoderbug:发送httpget请求的时出错Causedby:java.lang.IllegalArgumentException:Illegalcharacterinqueryatindex70:….原因:在请求中我用到了不常用的字符,导致调用HttpGet(url)方法时,url参数解析错误解决方法:所以如果法中这种问题,可以在调用下面的方法将参数加密URLEnco

    2022年6月17日
    34
  • JavaScript——利用正则表达式实现二代身份证号码的验证

    JavaScript——利用正则表达式实现二代身份证号码的验证HTML<divclass=”login-header”><aid=”link”>点击,弹出登录框</a></div><divclass=”box”id=”box”><divclass=”hd”id=”drop”>注册信息(可以拖拽)<spanid=”box_close”>[关闭]</span></div><divclas

    2022年6月27日
    32
  • java 中级面试题_java中级面试题[通俗易懂]

    java 中级面试题_java中级面试题[通俗易懂]本帖最后由唯我独赞mo于2015-11-1222:47编辑1、java中wait和sleep有什么区别?多线程条件下如何保证数据安全?答:最大区别是等待时wait会释放锁,而sleep会一直持有锁,wait通常用于线程时交互,sleep通常被用于暂停执行。2、java中volatile和synchronized有什么区别?1.volatile本质是在告诉jvm当前变量在寄存器(工作内存…

    2022年10月12日
    1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号