本篇主要介绍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);
};

  

End
菜单加载中...

HTML DOM 对象的更多相关文章

  1. JavaScript实现DOM对象选择器

    目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...

  2. 判断一个对象是jQuery对象还是DOM对象

    今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...

  3. 如何通过源生js获取一个元素的具体样式值 /* getCss:获取指定元素的具体样式的属性值 curElement:[dom对象] attr:[string] */

    昨天的博客些的真的是惨不忍睹啊!!!但是我的人生宗旨就是将不要脸的精神进行到底,所以,今天我又来了.哈哈哈哈哈! 方法一:元素.style.属性名:(这个有局限性--只能获取行内样式的值,对于样式表或 ...

  4. 锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)

    1.jQuery对象就是通过jQuery包装DOM对象后产生的对象.   2.jQuery对象和DOM对象的相互转换.   良好的书写风格: var $input=$("input" ...

  5. jQuery对象和DOM对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

  6. DOM对象与jQuery对象的相互转换

    DOM  对象可以使用 js       中的方法,  不能使用jQuery中的方法:jQuery对象只能使用jQuery中的方法, 不能使用js中的方法:jQuery对象是通过jQuery包装DOM ...

  7. DOM对象—选中执行效果

    ---恢复内容开始--- 例如我们注册时,一些法律条例,我们是否同意决定着能否注册.在选择同意或不同意时出现的效果. 先在body里做一个按钮和选项框. <input type="ch ...

  8. jQuery对象与dom对象相互转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...

  9. 关于DOM对象与JQuery对象的那些事

    这个问题源自上一次的工作室讨论班,主题是"jQuery选择器的使用",在讨论班的结尾,我留了一个思考题:  jQuery获取到的对象和直接调用原生Javascript方法获得的对象 ...

随机推荐

  1. 匹夫细说C#:庖丁解牛迭代器,那些藏在幕后的秘密

    0x00 前言 在匹夫的上一篇文章<匹夫细说C#:不是“栈类型”的值类型,从生命周期聊存储位置>的最后,匹夫以总结和后记的方式涉及到一部分迭代器的知识.但是觉得还是不够过瘾,很多需要说清楚 ...

  2. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  3. Android业务组件化之子模块SubModule的拆分以及它们之间的路由Router实现

    前言: 前面分析了APP的现状以及业务组件化的一些探讨(Android业务组件化之现状分析与探讨),以及通信的桥梁Scheme的使用(Android业务组件化之URL Scheme使用),今天重点来聊 ...

  4. 11、Struts2 的文件上传和下载

    文件上传 表单准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置 ...

  5. UWP开发之Template10实践二:拍照功能你合理使用了吗?(TempState临时目录问题)

    最近在忙Asp.Net MVC开发一直没空更新UWP这块,不过有时间的话还是需要将自己的经验和大家分享下,以求共同进步. 在上章[UWP开发之Template10实践:本地文件与照相机文件操作的MVV ...

  6. AI人工智能系列随笔:syntaxnet 初探(1)

    人工智能是 最近的一个比较火的名词,相信大家对于阿尔法狗都不陌生吧?其实我对人工智能以前也是非常抵触的,因为我认为机器人会取代人类,成为地球乃至宇宙的霸主,但是人工智能带给我的这种冲击,我个人感觉是欲 ...

  7. 个人网站对xss跨站脚本攻击(重点是富文本编辑器情况)和sql注入攻击的防范

    昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...

  8. 一行代码实现java list去重

    1.不带类型写法: 1 List listWithoutDup = new ArrayList(new HashSet(listWithDup)); 2.带类型写法(以String类型为例):1)Ja ...

  9. MediatorPattern(中介者模式)

    /** * 中介者模式 * @author TMAC-J * 研究了这么多设计模式,觉得无非就是几点: * 1.若两个类有耦合关系,设立一个中间类,处理两个类的关系,把两个类的耦合降低 * 2.面向接 ...

  10. 创建ABPboilerplate模版项目

    本文是根据角落的白板报的<通过ABPboilerplate模版创建项目>一文的学习总结,感谢原文作者角落的白板报. 1 准备 开发环境: Visual Studio 2015 update ...