HTML DOM 元素对象
HTML DOM 元素对象
HTML DOM 节点
在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :
- 文档本身就是一个文档对象
- 所有 HTML 元素都是元素节点
- 所有 HTML 属性都是属性节点
- 插入到 HTML 元素文本是文本节点
- 注释是注释节点
元素对象
在 HTML DOM 中, 元素对象代表着一个 HTML 元素。
元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点。
NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集合。
元素可以有属性。属性属于属性节点(查看下一章节)。
浏览器支持





所有主流浏览器都支持 元素对象 和 NodeList 对象。.
属性和方法
以上属性和方法可适用于所有 HTML 元素:
| 属性 / 方法 | 描述 |
|---|---|
| element.accessKey | 设置或返回accesskey一个元素 |
| element.addEventListener() | 向指定元素添加事件句柄 |
| element.appendChild() | 为元素添加一个新的子元素 |
| element.attributes | 返回一个元素的属性数组 |
| element.childNodes | 返回元素的一个子节点的数组 |
| element.classlist | 返回元素的类名,作为 DOMTokenList 对象。 |
| element.className | 设置或返回元素的class属性 |
| element.clientHeight | 在页面上返回内容的可视高度(不包括边框,边距或滚动条) |
| element.clientWidth | 在页面上返回内容的可视宽度(不包括边框,边距或滚动条) |
| element.cloneNode() | 克隆某个元素 |
| element.compareDocumentPosition() | 比较两个元素的文档位置。 |
| element.contentEditable | 设置或返回元素的内容是否可编辑 |
| element.dir | 设置或返回一个元素中的文本方向 |
| element.firstChild | 返回元素的第一个子节点 |
| element.focus() | 设置文档或元素获取焦点 |
| element.getAttribute() | 返回指定元素的属性值 |
| element.getAttributeNode() | 返回指定属性节点 |
| element.getElementsByTagName() | 返回指定标签名的所有子元素集合。 |
| element. getElementsByClassName() | 返回文档中所有指定类名的元素集合,作为 NodeList 对象。 |
| element.getFeature() | 返回指定特征的执行APIs对象。 |
| element.getUserData() | 返回一个元素中关联键值的对象。 |
| element.hasAttribute() | 如果元素中存在指定的属性返回 true,否则返回false。 |
| element.hasAttributes() | 如果元素有任何属性返回true,否则返回false。 |
| element.hasChildNodes() | 返回一个元素是否具有任何子元素 |
| element.hasfocus() | 返回布尔值,检测文档或元素是否获取焦点 |
| element.id | 设置或者返回元素的 id。 |
| element.innerHTML | 设置或者返回元素的内容。 |
| element.insertBefore() | 现有的子元素之前插入一个新的子元素 |
| element.isContentEditable | 如果元素内容可编辑返回 true,否则返回false |
| element.isDefaultNamespace() | 如果指定了namespaceURI 返回 true,否则返回 false。 |
| element.isEqualNode() | 检查两个元素是否相等 |
| element.isSameNode() | 检查两个元素所有有相同节点。 |
| element.isSupported() | 如果在元素中支持指定特征返回 true。 |
| element.lang | 设置或者返回一个元素的语言。 |
| element.lastChild | 返回的最后一个子元素 |
| element.namespaceURI | 返回命名空间的 URI。 |
| element.nextSibling | 返回该元素紧跟的一个元素 |
| element.nodeName | 返回元素的标记名(大写) |
| element.nodeType | 返回元素的节点类型 |
| element.nodeValue | 返回元素的节点值 |
| element.normalize() | 使得此成为一个"normal"的形式,其中只有结构(如元素,注释,处理指令,CDATA节和实体引用)隔开Text节点,即元素(包括属性)下面的所有文本节点,既没有相邻的文本节点也没有空的文本节点 |
| element.offsetHeight | 返回,任何一个元素的高度包括边框和填充,但不是边距 |
| element.offsetWidth | 返回元素的宽度,包括边框和填充,但不是边距 |
| element.offsetLeft | 返回当前元素的相对水平偏移位置的偏移容器 |
| element.offsetParent | 返回元素的偏移容器 |
| element.offsetTop | 返回当前元素的相对垂直偏移位置的偏移容器 |
| element.ownerDocument | 返回元素的根元素(文档对象) |
| element.parentNode | 返回元素的父节点 |
| element.previousSibling | 返回某个元素紧接之前元素 |
| element.querySelector() | 返回匹配指定 CSS 选择器元素的第一个子元素 |
| document.querySelectorAll() | 返回匹配指定 CSS 选择器元素的所有子元素节点列表 |
| element.removeAttribute() | 从元素中删除指定的属性 |
| element.removeAttributeNode() | 删除指定属性节点并返回移除后的节点。 |
| element.removeChild() | 删除一个子元素 |
| element.removeEventListener() | 移除由 addEventListener() 方法添加的事件句柄 |
| element.replaceChild() | 替换一个子元素 |
| element.scrollHeight | 返回整个元素的高度(包括带滚动条的隐蔽的地方) |
| element.scrollLeft | 返回当前视图中的实际元素的左边缘和左边缘之间的距离 |
| element.scrollTop | 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离 |
| element.scrollWidth | 返回元素的整个宽度(包括带滚动条的隐蔽的地方) |
| element.setAttribute() | 设置或者改变指定属性并指定值。 |
| element.setAttributeNode() | 设置或者改变指定属性节点。 |
| element.setIdAttribute() | |
| element.setIdAttributeNode() | |
| element.setUserData() | 在元素中为指定键值关联对象。 |
| element.style | 设置或返回元素的样式属性 |
| element.tabIndex | 设置或返回元素的标签顺序。 |
| element.tagName | 作为一个字符串返回某个元素的标记名(大写) |
| element.textContent | 设置或返回一个节点和它的文本内容 |
| element.title | 设置或返回元素的title属性 |
| element.toString() | 一个元素转换成字符串 |
| nodelist.item() | 返回某个元素基于文档树的索引 |
| nodelist.length | 返回节点列表的节点数目。 |
HTML DOM 元素对象的更多相关文章
- DOM元素对象的属性和方法(1)
一.accessKey() 作用:获取元素焦点快捷键:设置快捷键后,使用Alt+快捷键,让元素快速获得焦点, <!DOCTYPE html> <html> <head&g ...
- DOM元素对象的属性和方法(2)
11.contentEditable 作用:设置或返回元素内容可否编辑布尔值,HTML5新增属性 <!DOCTYPE html> <html> <head> < ...
- HTML DOM Document对象 元素对象 属性对象 事件对象
DOM Document对象 DOM 元素 对象 DOM 属性 对象 DOM 事件 菜鸟教程上 总结挺全的,就不多废话,链接点进去即可.. 后期对经常用到的会在此更新一些总结..... 开学了...自 ...
- 获取jQuery对象的第N个DOM元素 && table常用css样式
获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...
- QTP11使用DOM XPath以及CSS识别元素对象
我们知道,像DOM,Html,CSS,XPath等对对象的识别策略广泛运用于一些开源的工具,例如:Selenium,Watir,Watir-Webdriver,以前qtp版本是不支持这些东西的,现在q ...
- (13)JavaScript之[HTML DOM元素][JS对象]
元素 /** * HTML DOM 元素(节点)*/ //创建新的HTML元素 var para = document.createElement('p'); var node = document. ...
- DOM元素属性值如果设置为对象
结论:内部会调用toString方法,将设置的对象转换为字符串添加给相应的属性: 这个问题呢,是通过jQuery的each方法中,回调函数的this指向问题而来: 我们知道,回调函数中的this如果指 ...
随机推荐
- Android Studio教程--给Android Studio安装Genymotion插件
打开Android Studio,依次[File]-[Settings] 在打开的settings界面里找到plugins设置项,点击右侧的“Browser..”按钮 在搜索栏里输入genymotio ...
- 接口测试中三种传参请求(Map、request、Integer)解析
注册企业接口传入的是一个request,查询企业接口传入的是一个integer:根据名称和国家名称模糊匹配接口传入的是一个Map:针对三种不同的传参我怎么作接口测试呢? 1 package com.w ...
- 使用AS3输出ByteArray为16进制
package { import flash.utils.ByteArray; /** * 输出ByteArray为16进制 * @author Rise */ public class Byte2H ...
- CentOS 6.3下MySQL 5.6源码安装
Linux操作系统:CentOS 6.3 1:下载:当前mysql版本到了5.6.10 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downl ...
- 文件件监听器,android系统拍照功能调用后删除系统生成的照片
先说说要实现的功能: android调用系统拍照功能实时 预览 删除 上传 保存 (用户不能再本地文件夹中看到拍的照片) 再说说遇到的问题: 1.调用系统拍照在系统自带的拍照文件夹中生成一张随机命名图 ...
- 今天说一下Top ~
Top这个关键字,大家都不陌生~尤其是很多时候打开SSMS的时候右键表名,选择前1000行的时候,就可以见到编译出来的语句 Select top 1000 XXX from XXX 好~我们先看看To ...
- 前端构建工具gulp介绍
2016年3月3日 10:46:08 晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...
- 导出HTML
版权声明:本文为博主原创文章,未经博主允许不得转载.
- Linux文件I/O
文件描述符(File Descriptor) a small, nonnegative integer for use in subsequent system calls (read(2), wri ...
- ES6函数默认参数(Default Parameters)
语言更新时每一个新增的特性都是从千百万开发者需求里提取过来的,规范采用后能减少程序员的痛苦,带来便捷. 我们经常会这么写 function calc(x, y) { x = x || 0; y = y ...