HTML DOM 对象

  本篇主要介绍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开发之路系列文章

时间: 2024-10-11 06:56:21

HTML DOM 对象的相关文章

IE与FireFox的DOM对象树差异

 最近在做项目,有复习一下以前JS的关于DOM的知识点,再次小小的总结一下. 以下是DOM对象在IE与FireFox中的一些小区别,就当积累吧. 1.IE会把没有在文档中定义的属性也加入DOM树 2.IE不会把title中的文本内容加入DOM树 3.IE会把换行缩进信息过滤掉,firefox则会认为是有用的文本内容,并作为文本节点的一部分加入DOM树 4.IE不会把Script标签中的内容加入DOM树,FireFox将里面的内容加入DOM树

jQuery DOM对象区别与联系

对两种对象类型的定义,只要能理解并转换成自己的说法就可以,不用死板按照资料所写 jQuery对象(jq对象)其实就是通过jquery类库选择器获得的对象(或者说是通过$获取的对象或者说是通过jquery包装dom对象后产生的对象(可参照下面的对象转换理解)): jquery对象是jquery独有,可以使用jquery里面的方法,但不能使用dom的方法: 示例: $("#img").attr("src", "test.jpg");其中$("

jQuery对象与DOM对象转换

原文链接 http://www.cnblogs.com/ouyangping/p/6439939.html jQuery对象与DOM对象是不一样的 通过一个简单的例子,简单区分下jQuery对象与DOM对象: <p id="imooc"></p> 我们要获取页面上这个id为imooc的div元素,然后给这个文本节点增加一段文字:"hello,world",并且让文字颜色变成红色. 通过标准JavaScript处理: var p = docum

DOM对象和js对象以及jQuery对象的区别

一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系. 通过DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素. HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaScript 和 VBScript 使用. DOM对象,即是我们用

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

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

Jquery对象和DOM对象的区别

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

jquery对象转化为DOM对象

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-1.11.3.js"></script></head> <bo

jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、

this指的是原生js的DOM对象 .css(""):只写一个值是取值,写俩值是赋值 window.onload   ===   $(document).ready(); $(""):获取元素   标签名..类名.#id jQuery特点 链式编程 jq.shou(3000).html(内容) 相当于 jq.shou(3000) jq.gtml(内容) 隐式迭代 隐式实用for循环.迭代 如何使用jQuery 引包 一定要在使用之前 <script src =

dom对象

一般常用的几个dom对象的函数 var oDiv =document.createElement("div"); var text =document.createTextNode("baidu.com"); oDiv.appendChild(text); var op=document.getElementById('ppp') document.body.insertBefore(oDiv,op); var pa=document.getElementById(

什么是jquery $ jQuery对象和DOM对象 和一些选择器

1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的方法名太长,难记4.代码容错性较差5.入口函数只能有一个,如果出现多个,后面的会把前面的覆盖掉 3 jQuery版本介绍: 大版本 : 1 2 3 1 兼容ie6.7.8 2 3 不兼容 小版本: 压缩版(生产环境中用) 没有注释 没有换行 没有空格 变量名 都是 a b c d 这种模式 体积特别