在上一篇文章中我们知道在JavaScript中所有的节点都是继承Node类。一共有12中节点类型,今天我们来讲讲一些常用的节点类型。
整个文档是一个文档节点(document对象)
每个 HTML 元素是元素节点(element 对象)
HTML 元素内的文本是文本节点(text对象)
每个 HTML 属性是属性节点(attribute对象)
注释是注释节点(comment对象)
一、Document 类型文档节点
JavaScript通过Document类型表示文档,在浏览器中,document对象是HTMLDocument(继承自document类型)的一个实例,表示整个HTML页面。而且document对象是window对象的一个属性,因此可作为一个全局变量来访问。
表示当前文档对象,
常用属性
documentElement= document.firstElement=document.firstChild=document.childNodes[0]
body
title 文档标题
domain域名
url
referrer
document.anchors 包含文档中所有带有name特性的 a标签
document.applets 包含文档中所有带有<applet>元素,
document.forms 包含文档中所有forms 元素 = document.getElementsByTabName(“form”);
document.images 包含文档中所有 image 元素= document.getElementsByTabName(“image”);
document.link 包含文档中所有带有 link 特性的 a 标签。
document.write(); 如果在文档加载后执行,将重写页面。
二 、元素(Element)类型
所有的HTML标签在DOM中 都是HTMLElement 的实现
共有属性
属性不区分大小写。但标准一搬遵循骆驼命名法
innerHTML: 获取或设置HTML内容
outerHTML :设置或获取对象的纯文本形式
id :对应元素的id属性
title :对应元素的title属性lang :对应元素的lang属性 dir :对应元素的dir属性
className:对应元素的class属性
classList 返回元素的class属性作为DOMTokenList对象
dataset Y 返回自定义的data-*属性集合
hidden Boolean
对应元素的hidden属性
tabIndex long
对应元素的tabIndex属性
accessKey DOMString
对应元素的accessKey属性
accessKeyLabel DOMString Y 返回热键组合
draggable Boolean
对应元素的draggable属性
contentEditable DOMString
对应元素的contentEditable属性
isContentEditable Boolean Y 判断元素是否可用编辑
contextMenu HTMLMenuElement
对应元素的contextMenu属性
spellcheck
对应元素的spellcheck属性
commandType DOMString Y 对应元素的commandType属性
label DOMString Y 对应元素的label属性
icon DOMString Y 对应元素的icon属性
disabled Boolean Y 对应元素的disabled属性
checked Boolean Y 对应元素的checked属性
style CSSStyleDeclaration Y 对应元素的style属性
2、方法列表
方法名 数据类型 说明
getElementsByClassName NodeList 根据元素的class属性获取所有元素
insertAdjacentHTML void 在指定位置插入HTML或XML
click void 单击元素,触发click事件
scrollIntoView void 滚动元素内容到视点内
focus void 元素获取焦点
blur void 元素失去焦点