当前位置:Gxlcms > html代码 > html深入理解4种dom对象_html/css_WEB-ITnose

html深入理解4种dom对象_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:26人阅读

这四个对象是从HTML结构中逐层深入的,分别代表了HTML结构中所有的内容;

1、Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

Document对象集合有forms[],images[],links[],anchors[],all[],applets.

document对象的方法:

write() 方法值得注意,在文档载入和解析的时候,它允许一个脚本向文档中插入动态生成的内容。

2、Element对象

element对象表示的是HTML元素。

element(也可以说这是HTML元素)常用的属性和方法:

1、appendChild() 方法向节点添加最后一个子节点。

  • Coffee
  • Tea

请点击按钮向列表中添加项目。

2、childNodes 属性返回节点的子节点集合,以 NodeList 对象。

请点击按钮来获得 body 元素子节点的相关信息。

3、className 属性设置或返回元素的 class 属性。

4、getAttribute() 方法返回指定属性名的属性值。

请阅读 Attr 对象,

请点击按钮来显示上面这个链接的 target 属性值。

5、innerHTML 属性设置或返回元素的 inner HTML。

6、element.removeAttribute()从元素中移除指定属性。/element.removeAttributeNode()移除指定的属性节点,并返回被移除的节点。

element.removeChild()从元素中移除子节点。/element.replaceChild()替换元素中的子节点;

  • Coffee
  • Tea
  • Milk

点击按钮来删除列表中的首个项目。

7、textContent 属性设置或返回指定节点的文本内容,以及它的所有后代。

点击按钮来获得 button 元素的文本内容。

3、Attribute对象

在 HTML DOM 中,Attr 对象表示 HTML 属性。attribute属性是属于element对象(即HTML元素的属性)。

4、Event对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

HTML 标签定义的事件行为:

鼠标 / 键盘属性:

人气教程排行