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]竖直滑动选择器WheelView的实现
以下内容为原创,转载请注明: 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3819304.html 公司项目中有这么一个需求,所以需要自己实现下.效 ...
- cocoapods安装完第三方类库后不生成workspace
cocoapods的版本太低,更新cocoapod版本:sudo gem install cocoa pods
- C语言ASCII码、运算符优先级、转义字符
- ReactiveCocoa框架下的MVVM模式解读
记录一些MVVM文章中关于ReactiveCocoa的代码: 实例一:带有分页的文章列表,根据文章类别过滤出文章的列表,可以进入文章详细页面 1:YFBlogListViewModel 首先了解关于列 ...
- 【读书笔记】iOS-给模拟器相册增加图片
一,打开模拟器(如下图所示)----->找到模拟器中的相册---->打开相册---->把要添加的图片拖动到模拟器中.
- 【读书笔记】iOS网络-解析响应负载
Web Service可以通过多种格式返回结构化数据, 不过大多数时候使用的是XML与JSON.也可以让应用只接收HTML结构的数据.实现了这些Web Service或是接收HTML文档的应用必须能解 ...
- SQL速记
集合操作 WITH a AS ( SELECT 1 id UNION SELECT 2 ), b AS ( SELECT 1 id UNION SELECT 3 ) SELECT * FR ...
- DFX 安全测试-- 告诉你什么是XSS、sql注入?POST和GET的区别....
1.用户权限测试 (1) 用户权限控制 1) 用户权限控制主要是对一些有权限控制的功能进行验证 2) 用户A才能进行的操作,B是否能够进行操作(可通过窜session,将在下面介绍) 3)只能有A条件 ...
- array_filter、array_map、array_walk解释
/** * array_filter 用回调函数处理数组中的各个元素, * 重点在于过滤(而不是新增)某个元素,当你处理到一个元素时, * 如果返回了false,那么这个元素将会被过滤掉.PS:保持了 ...
- 不同servlet版本的web.xml的头部信息
servlet2.5 <?xml version="1.0" encoding="UTF-8"?> <web-app version=&quo ...