HTML DOM 对象

Posted 2020-06-13

　　本篇主要介绍html DOM 对象：Document、Element、Attr、Event等4个对象。

目录

1. Document 对象：表示文档树的根节点，大部分属性和方法都是对元素进行操作。

2. Element 对象：表示文档中的元素，可包含为元素节点、文本节点以及注释节点。

3. Attr 属性对象：表示一个Element节点的属性。可获取、添加、修改指定的属性。

4. Event 对象：表示事件发生时的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。

 

1. Document 对象

Document 对象是文档树的根节点。

获取一个Document对象通常是通过窗口的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 altKey ：只读，获取Alt键是否按下。true：按下；false：未按下。适用事件：鼠标/键盘。

 readonly boolean bubbles ：只读，获取此事件是否冒泡。适用事件：鼠标/键盘。

 readonly int button ：只读，获取鼠标哪个键点击触发了此事件。0：表示左键；1：表示中键；2：表示右键。适用事件：鼠标。

 readonly boolean cancelable ：只读，获取此事件是否可被撤销。true：事件可撤销。可调用preventDefault()取消后续的默认动作。flase：事件不可撤销。适用事件：鼠标/键盘。

 readonly ASCII charCode ：只读，获取按键的ASCII码，可通过String.fromCharCode()转换为字符。适用事件：键盘事件(文本输入框的onkeypress事件，不支持keydown和keyup)。

 readonly long clientX ：只读，获取鼠标在浏览器的X坐标。适用事件：鼠标。

 readonly long clientY ：只读，获取鼠标在浏览器的Y坐标。适用事件：鼠标。

 readonly boolean ctrlKey ：只读，获取Ctrl键是否按下。适用事件：鼠标/键盘。

 readonly Object currentTarget ：只读，获取正在处理此事件的对象，可以为Element、Document对象等等。适用事件：鼠标/键盘。

 readonly int detail ：只读，获取鼠标的单击次数：1表示单击，2表示双击，3表示三击，以此类推。适用事件：鼠标。

 readonly ASCII keyCode ：只读，获取按键的ASCII码，可通过String.fromCharCode()转换为字符。适用事件：键盘。

 readonly long offsetX ：只读，获取鼠标在整个Body区域的X坐标。适用事件：鼠标。

 readonly long offsetY ：只读，获取鼠标在整个Body区域的Y坐标（clientY+Scroll.Top）。适用事件：鼠标。

 readonly long screenX ：只读，获取鼠标在整个显示器区域的X坐标。适用事件：鼠标。

 readonly long screenY ：只读，获取鼠标在整个显示器区域的Y坐标。适用事件：鼠标。

 readonly boolean shiftKey ：只读，获取Shift键是否按下。适用事件：鼠标/键盘。

 readonly Object target ：只读，获取触发此事件的对象。适用事件：鼠标/键盘。

 readonly string type ：只读，获取事件名称（不包含前缀on，如：click）。适用事件：鼠标/键盘。

 

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

　　

 

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

本篇文章：5.2 HTML DOM 对象

Web开发之路系列文章