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属性。
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('
');
void document.writeln(string) :向HTML文档写入内容,并在结尾换行。
2. Element 对象
说明:Element 对象表示文档中的元素,可包含为元素节点、文本节点以及注释节点。
2.1 实例属性
readonly NamedNodeMap attributes :只读,获取此元素的所有属性集合对象。
readonly HTMLElement[] children :获取此元素下子元素的数组。
readonly string[] classList :只读,获取一个包含该元素class的数组。eg: => ['btn-show','btn-submit']
string className :设置或获取元素的class属性。eg: => 'btn-show btn-submit'
string id :设置或获取元素的id。
string innerHTML :以HTML代码格式设置获取元素内的内容。
示例:
HTML:
Js:document.getElementById('div').innerHTML; //=> "内容"
方法详解
string innerText :设置或获取元素内的文本内容。
示例:
HTML:
Js:document.getElementById('div').innerText; //=> "内容
方法详解
CSSStyleDeclaration style :设置或获取元素的样式。eg:element.style.width='30px'; // 设置元素的width样式
readonly string tagName :获取元素的元素名称,以大写格式返回。eg:
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对象。
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个函数不会执行。
4.1 实例属性
readonly boolean bubbles :只读,获取此事件是否冒泡。
readonly boolean cancelable :只读,获取此事件是否可被撤销。true:事件可撤销。可调用preventDefault()取消后续的默认动作。flase:事件不可撤销。
readonly ObjectcurrentTarget:只读,获取正在处理此事件的对象,可以为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').οnclick=function(e){
e.preventDefault();//checkbox不会被勾选和取消勾选
};
方法示例
void stopImmediatePropagation() :阻止当前事件的冒泡行为并且阻止此元素上相同类型事件的后续处理函数。
document.body.οnclick=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对象简写,HTML DOM 对象相关推荐
- BOM 浏览器对象模型和DOM 文档对象模型
浏览器对象模型BOM 1. 浏览器对象模型介绍 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可 ...
- jquery对象PHP转换,jquery对象和DOM对象如何相互转换?
本篇文章给大家介绍一下jquery对象和DOM对象的转换,有需要的朋友可以参考一下,希望对你有所帮助. 我们在上一篇文章jquery对象和DOM对象的区别有哪些?中也简单介绍了关于jquery对象和D ...
- jquery对象PHP转换,jQuery对象与DOM对象转换方法详解_jquery
本文实例分析了jQuery对象与DOM对象的转换方法.分享给大家供大家参考,具体如下: jQuery对象转换为dom对象 只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属 ...
- DOM对象和内置对象(中)
前言 在第一篇博客<了解JavaScript>中已经介绍了DOM及DOM树里顶端对象window,还有它的一个子对象 document.接下来会介绍它们的一些实用的对象和方法,如: 1.a ...
- dom定义了访问html文档对象的,HTML DOM (文档对象模型)
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 DO ...
- table取tr对象 vue_javascript的DOM对象终极总结:你必看的js面向对象
<大数据和人工智能交流>头条号向广大初学者新增C .Java .Python .Scala.javascript 等目前流行的计算机.大数据编程语言,希望大家以后关注本头条号更多的内容.作 ...
- JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)...
昨日内容回顾 1.三种引入方式1.行内js <div onclick = 'add(3,4)'></div>//声明一个函数function add(a,b){}2.内接js& ...
- 关于jQuery对象(类数组对象)以及DOM对象相互转化问题——[object Object]和[object HTMLInputElement]
之前在某官网课程上看有关jQuery和bootstrap的相关教程,有一节课是教我们如何制作价格菜单的按钮以及总价问题 选中按钮,按钮样式会发生变化,右上角价格会自动运算 6个菜单的html结构差不多 ...
最新文章
- Aoite 系列(03) - 一起来 Redis 吧!
- 自动管理Windows2003好用的“远程桌面”
- “稳定”凸包----poj1228
- fedora desktop
- linux中一些简便的命令之wc
- C编程,随机数,排序
- Python-TKinter布局之pack
- Apache Camel Intellij IDEA插件的工作已开始
- Python 学习随笔1
- 关于java.lang.ArithmeticException: divide by zero的异常
- 行车路途出现意外6个急救绝招
- 川崎机器人f控制柜接线图_东莞Kawasaki机器人控制柜维修中心
- 码率 码字(数字通信系统 信息论)
- 非度量多维标度_非度量多维尺度分析
- Pyrene-PEG-Rhodamine,芘丁酸-聚乙二醇-罗丹明,RB-PEG-Pyrene
- Calendar根据输入的年份和周数计算该周的开始日期和结束日期
- 阿里云| 阿里云汇总
- 一个图片上传插件,含图片上传后生成预览图片
- 中文分词之维特比算法详解
- 房屋安全鉴定的建筑结构检测技术
热门文章
- 【报告分享】2021制造业与人工智能创新应用发展报告.pdf(附下载链接)
- 红杉中国2021企业数字化年度指南:企业如何制胜数字化浪潮?
- 【白皮书分享】创新中国2030:释放技术红利,解锁增长动能-埃森哲.pdf(附下载链接)...
- 【白皮书分享】2020新式茶饮白皮书:数字化进阶-奈雪.pdf(附下载链接)
- 【论文】Awesome Relation Extraction Paper(关系抽取)(PART IV)
- android 设置drawable大小,在Android中调整Drawable大小
- 微信小程序遇到的程序异步执行导致数据库读写异常的问题
- 最短路算法(3种算法)
- 花书+吴恩达深度学习(八)优化方法之 Batch normalization
- 吴恩达机器学习作业Python实现(三):多类分类和前馈神经网络