本篇文章: HTML DOM 对象

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) :创建一个指定的事件类型。

 方法详解

 HTMLElement document.getElementById(elementID) :获取指定ID的第一个元素。

 方法详解

 HTMLElement[] document.getElementsByClassName(className) :获取一个class属性含有指定值的元素数组 。

 方法详解

 HTMLElement[] document.getElementsByName(nameValue) :获取一个name属性为指定值的元素数组。

 方法详解

 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代码格式设置获取元素内的内容。

 方法详解

 string 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。

 方法详解

 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对象。


1

2

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事件,执行这代码,元素不会被勾选和取消勾选。

 方法示例

 void stopImmediatePropagation() :阻止当前事件的冒泡行为并且阻止此元素上相同类型事件的后续处理函数

 方法示例

 void stopPropagation() :阻止当前事件的冒泡行为。

 方法详解

4.3 currentTarget 与 target 属性的区别

currentTarget :获取正在处理此事件的对象。

target :获取触发此事件的对象。

冒泡阶段时两者的区别: 假设body和Button元素都注册了click事件;当点击Button元素时,body的click事件也会触发,此时在body的click事件内,currentTarget指向body元素,target指向Button元素。

示例:点击Button元素时的显示结果


1

2

3

4

5

6

7

8

9

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);

};

  

==================================系列文章==========================================

 

转载http://www.cnblogs.com/polk6/p/4957563.html

时间: 2024-10-06 00:07:23

本篇文章: HTML DOM 对象的相关文章

JavaScript基础--DOM对象加强篇(十四)

1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 writeln 向文档输出文本或者js代码,与write不一样的地方是,writeln是换行输出. 比如: document.write("hello");document.writeln("ok"); hello ok 但是对浏览器来看,输出效果没有区别. 1.3 g

jQuery基础(样式篇,DOM对象,选择器,属性样式)

1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用. $(document).ready(function() {   内容  }); 1.jQuery对象与DOM对象   jQuery对象与DOM对象是不一样的 普通处理,通过标准JavaScript处理: var p = document.getElementById

HTML DOM 对象

本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2. Element 对象:表示文档中的元素,可包含为元素节点.文本节点以及注释节点. 3. Attr 属性对象:表示一个Element节点的属性.可获取.添加.修改指定的属性. 4. Event 对象:表示事件发生时的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态等等.

在OCX初始化时获取其在网页中的DOM对象

OCX初始化的时候会调用SetClientSite,会传入IOleClientSite对象. 1 CComQIPtr<IOleControlSite, &IID_IOleControlSite> spSite(pClientSite); 2 CComDispatchDriver ecDisp; 3 spSite->GetExtendedControl(&ecDisp); 如上代码,根据IOleClientSite对象,我们可以得到IOleControlSite对象:再通过

看到关于JS线程的两篇文章

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 [javascript] view plaincopyprint? setTimeout( function(){ alert(’你好!’); } , 0); setInterval( callbackFunction , 100); 认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaS

JavaScript之DOM对象的获取

之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaScript之DOM对象的获取(二)> 接下来,开始讲述本文内容.在文档中,我们还可以通过不同的现象和特征获取DOM对象. 8.document.activeElement 这是一个属性,返回当前获取焦点的元素  效果 9.document.anchors 返回对文档中所有Anchor对象的引用,即获取当

[转] 以后再有人问你selenium是什么,你就把这篇文章给他

本文转自:https://blog.csdn.net/TestingGDR/article/details/81950593 写在最前面:目前自动化测试并不属于新鲜的事物,或者说自动化测试的各种方法论已经层出不穷,但是,能够在项目中持之以恒的实践自动化测试的团队,却依旧不是非常多.有的团队知道怎么做,做的还不够好:有的团队还正在探索和摸索怎么做,甚至还有一些多方面的技术上和非技术上的旧系统需要重构…… 本文将会从使用和实践两个视角,尝试对基于Web UI自动化测试做细致的分析和解读,给各位去思考

还不知道JavaScript-DOM怎么弄?这篇文章不容错过

文档对象模型DOM,是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中.另外一种简单的API是基于事件的SAX,它可以用于处理很大的XML文档,由于大,所以不适合全部放在存储器中处理.今天大家就跟随我的脚步,来详细了解一下关于DOM的那些事. DOM的增加 DOM操作中增指的是增加节点,分为两部分:创建节点和插入节点. 创建节点 创建节点中常用的API方法主要有: document.createElement():创建指定的HTML元素 document.createTextN

Jquery对象和DOM对象的区别

1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;复制代码 代码如下: var domObj = document.getElementById("id"); //DOM对象var $obj = $("#id"); //j