HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document、Element、Attr、Event等4个对象。
目录
1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作。
2. Element 对象:表示文档中的元素,可包含为元素节点、文本节点以及注释节点。
3. Attr 属性对象:表示一个Element节点的属性。可获取、添加、修改指定的属性。
4. Event 对象:表示事件发生时的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。
1. Document 对象
Document 对象是文档树的根节点。
获取一个Document对象通常是通过窗口的document属性。
扩展阅读:https://developer.mozilla.org/en-US/docs/Web/API/document
1.1 静态属性
readonly [] document.all :获取一个包含HTML文档内的所有元素的数组。
readonly [] document.anchors :获取一个包含HTML文档内的所有anchor元素的数组。
readonly body document.body :获取HTML文档内的 body 元素。
string document.charset :设置或获取文档的字符编码。
cookie document.cookie :设置或获取当前HTML文档的cookie。
string document.designMode :设置文档是否可编辑。on:文档可编辑;off(默认):文档不可编辑。
readonly string document.domain :获取当前HTML文档的域名。
readonly [] document.forms :获取一个包含HTML文档内的所有form元素的数组。
readonly [] document.images :获取一个包含HTML文档内的所有image元素的数组。
readonly [] document.links :获取一个包含HTML文档内的所有link元素的数组
readonly string document.referrer :获取载入本文档的来源URL。
string document.title :设置或获取HTML文档的标题。
readonly string document.URL :获取HTML文档的URL。
1.2 静态方法
Attribute document.createAttribute(attrName) :创建一个属性对象。eg:document.createAttribute('id'); // 创建一个id属性
HTMLElement document.createElement(elementName) :创建一个元素对象。eg:document.createElement('a'); // 创建一个a元素
HTMLElement document.createElementNS(namespaceURI,attrName) :创建一个元素对象,并指定命名空间。eg:document.createElementNS("http://www.w3.org/1999/xhtml","a");
EventType document.createEvent(eventType) :创建一个指定的事件类型。
参数:
eventType {EventTyper} :指定事件类型,如MouseEvent。 返回值:
{EventType} 返回所创建的事件类型。 示例:
var mouseEvent = document.createEvent('MouseEvent'); // 创建一个鼠标事件
方法详解
HTMLElement document.getElementById(elementID) :获取指定ID的第一个元素。
参数:
elementID {string} :元素的ID。 返回值:
{HTMLElment} 获取指定ID的元素对象。若没有找到,获取null;若容器下含有多个相同ID的元素,获取第一个匹配的元素。 示例:
var btn = document.getElementById('btn_submit'); // 获取一个ID为btn_submit的元素
方法详解
HTMLElement[] document.getElementsByClassName(className) :获取一个class属性含有指定值的元素数组 。
注意:若元素class属性包含多个类,指定其中一个,就能获取此元素。 参数:
className {string} :元素class属性包含的字符。 返回值:
{HTMLElement[]} 返回一个元素数组。 示例:
var btnArray=document.getElementsByClassName('btn-hide'); // 获取一个包含class属性包含btn-hide的元素数组
方法详解
HTMLElement[] document.getElementsByName(nameValue) :获取一个name属性为指定值的元素数组。
参数:
nameValue {string} :元素name属性指定的值。 返回值:
{HTMLElement[]} 返回一个元素数组。 示例:
var btnArray=document.getElementsByName('txt'); // 获取一个name属性为txt的元素数组
方法详解
HTMLElement[] document.getElementsByTagName(elementName) :获取一个指定元素名称的元素数组。
参数:
elementName {string} :元素的名称。如:div、a等等。 返回值:
{HTMLElement[]} 返回一个元素数组。 示例:
var linkArray=document.getElementsByTagName('a'); // 获取a元素数组
方法详解
void document.write(string) :向HTML文档写入内容。eg:document.write('<div>显示div控件</div>');
void document.writeln(string) :向HTML文档写入内容,并在结尾换行。
2. Element 对象
说明:Element 对象表示文档中的元素,可包含为元素节点、文本节点以及注释节点。
获取方式:可通过document.getElementById(elementID)、document.getElementsByName(className)、document.getElementsByName(nameValue)、document.getElementsByTagName(elementName)等方式来获取指定元素。
扩展阅读:https://developer.mozilla.org/en-US/docs/Web/API/Attr
2.1 实例属性
readonly NamedNodeMap attributes :只读,获取此元素的所有属性集合对象。
readonly HTMLElement[] children :获取此元素下子元素的数组。
readonly string[] classList :只读,获取一个包含该元素class的数组。eg:<button class="btn-show btn-submit"></buttom> => ['btn-show','btn-submit']
string className :设置或获取元素的class属性。eg:<button class="btn-show btn-submit"></buttom> => 'btn-show btn-submit'
string id :设置或获取元素的id。
string innerHTML :以HTML代码格式设置获取元素内的内容。
示例:
HTML:<div><span>内容</span></div>
Js:document.getElementById('div').innerHTML; // => "<span>内容</span>"
方法详解
string innerText :设置或获取元素内的文本内容。
示例:
HTML:<div><span>内容</span></div>
Js:document.getElementById('div').innerText; // => "内容
方法详解
CSSStyleDeclaration style :设置或获取元素的样式。eg:element.style.width='30px'; // 设置元素的width样式
readonly string tagName :获取元素的元素名称,以大写格式返回。eg:<div></div> => element.tagName; // 返回 DIV
readonly string namespaceURI :获取元素的命名空间。默认返回为:"http://www.w3.org/1999/xhtml"。
string title :设置或获取元素title属性的值。
2.2 实例方法
void blur() :该元素失去焦点。eg:document.getElementById('text').blur();
void click() :该元素模拟点击。eg:document.getElementById('text').click();
void focus() :该元素获取焦点。eg:document.getElementById('text').focus();
string getAttribute(attributeName) :获取指定属性的值,若属性不存返回null。eg:document.getElementById('div').getAttribute('name'); // 获取元素的name属性
boolean hasAttribute(attributeName) :判断当前元素是否含有某个属性。eg:document.getElementById('div').hasAttribute('name'); // => true:含有name属性
HTMLElement querySelector(CssSelector) :获取该元素下第一个符合CssSelector的匹配子元素。若没有找到,返回null。
CssSelector 样式选择器,可根据Css匹配规则查找元素。如:
1) 根据ID查找
document.querySelector('#btn'); 2) 根据class查找
document.querySelector('.btn-show'); 3) 根据元素类型选择
document.querySelector('button'); // 获取button元素 4) 根据特定属性查找
document.querySelector('[data-po="cool"]'); // 自定义属性data-po的值为cool
方法详解
HTMLElement[] querySelectorAll(CssSelector) :获取一个数组,包含该元素下所有符合CssSelector匹配的子元素。CssSelector规范参照上个方法的详解。
void removeAttribute(attributeName) :删除元素的指定属性。不管元素是否含有此属性,都返回undefined。
void setAttribute(attributeName,value) :设置该元素某个属性的值。若此属性不存在于该元素,进行添加属性操作。eg:document.getElementById('div').setAttribute('name','logdiv'); // 设置name属性
3. Attr 属性对象
说明:Attr 对象表示一个Element节点的属性。
获取方式:element.attributes 属性获取Attr对象。
扩展阅读:https://developer.mozilla.org/en-US/docs/Web/API/Attr
3.1 实例属性
readonly string name :只读,获取属性名称。eg:document.getElementById('div').attributes[0].name;// => id :获取第一个属性的名称
string value :设置或获取属性的值。eg:document.getElementById('div').attributes[0].value;// => div :获取第一个属性的值
3.2 方法
无
4. Event 对象
说明:Event 对象表示事件发生时的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。
获取方式:事件触发时的第一个参数 或者 事件触发时调用window.event对象。
document.getElementById('btn').addEventListener('click', function(e){
console.log(window.event==e); // => true :触发时两者是一样
冒泡事件:当子元素触发某一事件时,父元素会触发相同时间(事件为允许冒泡)。
阻止后续处理程序:通过addEventListener()方法可以给元素的同一事件注册多个处理程序,在某个事件中调用了stopImmediatePropagation() 方法后,后面已经注册的处理程序将不会执行。比如,某个元素在click事件上注册了3个函数,在第2个函数上调用了stopImmediatePropagation()方法,第3个函数不会执行。
扩展阅读:https://developer.mozilla.org/en-US/docs/Web/API/Event
4.1 实例属性
readonly boolean bubbles :只读,获取此事件是否冒泡。
readonly boolean cancelable :只读,获取此事件是否可被撤销。true:事件可撤销。可调用preventDefault()取消后续的默认动作。flase:事件不可撤销。
readonly Object currentTarget :只读,获取正在处理此事件的对象,可以为Element、Document对象等等。
readonly boolean defaultPrevented :只读,表示是否已经调用过了preventDefault()。true:已经调用过了preventDefault()方法。
readonly int eventPhase :只读,表示事件的处理阶段:0表示没有正在处理,1表示捕获阶段,2表示目标阶段,3表示冒泡阶段。
readonly Object target :只读,获取触发此事件的对象。
readonly long timeStamp :只读,获取事件创建的时间。eg:console.log(e.timeStamp); // => 1455034313689
readonly string type :只读,获取事件名称(不包含前缀on,如:click)
readonly boolean isTrusted :只读,表示此事件是否由浏览器生成。true:由浏览器生成。false:通过JS创建,如:dispatchEvent()。
4.2 实例方法
void preventDefault() :终止事件的后续默认操作(事件要可撤销,即cancelable属性为true)。如:checkbox的click事件,执行这代码,元素不会被勾选和取消勾选。
document.getElementById('ckbox').onclick=function(e){
e.preventDefault(); // checkbox不会被勾选和取消勾选
};
方法示例
void stopImmediatePropagation() :阻止当前事件的冒泡行为并且阻止此元素上相同类型事件的后续处理函数。
document.body.onclick=function(e){
console.log('body-click');
}; document.getElementById('btn').addEventListener('click', function(e){
console.log('btn-click-1');
}); document.getElementById('btn').addEventListener('click', function(e){
console.log('btn-click-2');
// stopImmediatePropagation()方法将阻止当前事件的冒泡行为并且阻止此元素上相同类型事件的后续处理函数;
// 将会输出:btn-click-1、btn-click-2
// 若取消stopImmediatePropagation()方法,将会输出:btn-click-1、btn-click-2、btn-click-3、body-click
e.stopImmediatePropagation();
}); document.getElementById('btn').addEventListener('click', function(e){
console.log('btn-click-3');
});
方法示例
void stopPropagation() :阻止当前事件的冒泡行为。
document.body.onclick = function (e) {
console.log('body的click事件');
};
document.getElementById('btn').onclick = function (e) {
console.log('btn的click事件');
e.stopPropagation(); // 阻止此事件后续的冒泡行为,原先点击此事件,会触发body的相同类型事件
};
方法详解
4.3 currentTarget 与 target 属性的区别
currentTarget :获取正在处理此事件的对象。
target :获取触发此事件的对象。
冒泡阶段时两者的区别: 假设body和Button元素都注册了click事件;当点击Button元素时,body的click事件也会触发,此时在body的click事件内,currentTarget指向body元素,target指向Button元素。
示例:点击Button元素时的显示结果
document.body.onclick = function (e) {
console.log(e.currentTarget); // 指向body元素
console.log(e.target); // 若是冒泡事件时,指向最开始触发的元素。否则为元素自身。
}; document.getElementById('btn').onclick = function (e) {
console.log(e.currentTarget);
console.log(e.target);
};
HTML DOM 对象的更多相关文章
- JavaScript实现DOM对象选择器
目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...
- 判断一个对象是jQuery对象还是DOM对象
今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...
- 如何通过源生js获取一个元素的具体样式值 /* getCss:获取指定元素的具体样式的属性值 curElement:[dom对象] attr:[string] */
昨天的博客些的真的是惨不忍睹啊!!!但是我的人生宗旨就是将不要脸的精神进行到底,所以,今天我又来了.哈哈哈哈哈! 方法一:元素.style.属性名:(这个有局限性--只能获取行内样式的值,对于样式表或 ...
- 锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)
1.jQuery对象就是通过jQuery包装DOM对象后产生的对象. 2.jQuery对象和DOM对象的相互转换. 良好的书写风格: var $input=$("input" ...
- jQuery对象和DOM对象的区别
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- DOM对象与jQuery对象的相互转换
DOM 对象可以使用 js 中的方法, 不能使用jQuery中的方法:jQuery对象只能使用jQuery中的方法, 不能使用js中的方法:jQuery对象是通过jQuery包装DOM ...
- DOM对象—选中执行效果
---恢复内容开始--- 例如我们注册时,一些法律条例,我们是否同意决定着能否注册.在选择同意或不同意时出现的效果. 先在body里做一个按钮和选项框. <input type="ch ...
- jQuery对象与dom对象相互转换
核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...
- 关于DOM对象与JQuery对象的那些事
这个问题源自上一次的工作室讨论班,主题是"jQuery选择器的使用",在讨论班的结尾,我留了一个思考题: jQuery获取到的对象和直接调用原生Javascript方法获得的对象 ...
随机推荐
- Minor【 PHP框架】1.简介
1.1 Minor是什么 Minor是一个简单但是优秀的符合PSR4的PHP框架,It just did what a framework should do. 只做一个框架应该做的,简单而又强大! ...
- JAVA问题集锦Ⅰ
1.Java的日期添加: import java.util.Date ; date=new date();//取时间 Calendar calendar = new GregorianCalendar ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(75)-微信公众平台开发-用户管理
系列目录 前言 本节主要是关注者(即用户)和用户组的管理,微信公众号提供了用户和用户组的管理,我们可以在微信公众号官方里面进行操作,添加备注和标签,以及移动用户组别,同时,微信公众号也提供了相应的接口 ...
- spring remoting源码分析--Hessian分析
1. Caucho 1.1 概况 spring-remoting代码的情况如下: 本节近分析caucho模块. 1.2 分类 其中以hession为例,Hessian远程服务调用过程: Hessian ...
- Unity3D 5.3 新版AssetBundle使用方案及策略
1.概览 Unity3D 5.0版本之后的AssetBundle机制和之前的4.x版本已经发生了很大的变化,一些曾经常用的流程已经不再使用,甚至一些老的API已经被新的API所取代. 因此,本文的主要 ...
- 灵魂宝石 bzoj 2663
灵魂宝石(1s 128MB)soulgem [问题描述] "作为你们本体的灵魂,为了能够更好的运用魔法,被赋予了既小巧又安全的外形" 我们知道,魔法少女的生命被存放于一个称为灵魂宝 ...
- 著名ERP厂商的SSO单点登录解决方案介绍一
SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要的登录映射到其他应用中用于同一个用户 ...
- Android Butterknife 8.4.0 使用方法总结
转载请标明出处:http://www.cnblogs.com/zhaoyanjun/p/6016341.html 本文出自[赵彦军的博客] 前言 ButterKnife 简介 ButterKnife是 ...
- 手机游戏渠道SDK接入工具项目分享(二)万事开头难
一般接到任务后程序员们通常都开始着手进行技术调研了,但我这活是项目负责人.还有一大堆事情要先期准备,没人能帮忙. 一.人力配置 考虑的之前已经有一波人搞了大半年,但没有起色,先期也没有太大人力需求,所 ...
- 「译」JUnit 5 系列:环境搭建
原文地址:http://blog.codefx.org/libraries/junit-5-setup/ 原文日期:15, Feb, 2016 译文首发:Linesh 的博客:环境搭建 我的 Gith ...