JavaScript --DOM 节点的实现(二)文档节点、元素节点

  在上一篇文章中我们知道在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 元素失去焦点

猜你喜欢

转载自www.cnblogs.com/cuner/p/12417187.html