HTML DOM 对象

最新推荐文章于 2019-07-08 17:28:42 发布

loren_123

最新推荐文章于 2019-07-08 17:28:42 发布

阅读量177

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/loren_123/article/details/81588232

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Document 对象

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

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

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

Document对象集合

1. all：提供对文档中所有 HTML 元素的访问

2. anchors：返回对文档中所有 Anchor 对象的引用

3. applets：返回对文档中所有 Applet 对象的引用

4. forms：返回对文档中所有 Form 对象引用

5. images：返回对文档中所有 Image 对象引用

6. links：返回对文档中所有 Area 和 Link 对象引用

Document对象属性

1. body：提供对 <body> 元素的直接访问

2. cookie：设置或返回与当前文档有关的所有 cookie

3. domain：返回当前文档的域名

4. lastModified：返回文档被最后修改的日期和时间

5. referrer：返回载入当前文档的文档的 URL

6. title：返回当前文档的标题

7. URL：返回当前文档的 URL

Document对象方法

1. close：关闭用 document.open() 方法打开的输出流，并显示选定的数据

2. getElementById：返回对拥有指定id的第一个对象的引用

3. getElementsByName：返回带有指定名称的对象集合

4. getElementsByTagName：返回带有指定标签名的对象集合

5. open：打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。

语法：document.open(mimetype, replace);

6. write：向文档写 HTML 表达式或 JavaScript 代码

7. writeIn：等同于 write() 方法，不同的是在每个表达式之后写一个换行符

Element 对象

HTML DOM 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

Element 对象

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点

Element 属性和方法

1. element.accesskey：设置或返回元素的快捷键（不同浏览器快捷键使用方法不同）

2. element.appendChild()：向元素添加新的子节点，作为最后一个子节点

3. element.attributes：返回元素属性的 NamedNodeMap

4. element.childNodes：返回元素子节点的 NodeList（元素中的空格被视为文本，而文本被视为节点）

5. element.className：设置或返回元素的 class 属性

6. element.clientHeight、element.clientWidth：返回元素的可见高度、宽度

7. element.cloneNode()：克隆元素

8. element.compareDocumentPosition()：比较两个元素的文档位置

语法：p1.compareDocumentPosition(p2);

返回值：

1-这两个节点不属于同一文档
2- p1 在 p2 后面
4- p1 在 p2 前面
8- p1 被放在p2里面
16- p2 在 p1 元素里面
32- 这两个节点没有关系，或者它们是同一个元素上的两个属性

9. element.contentEditable：设置或返回元素内容是否可编辑

10. element.dir：设置或返回元素的文本方向（<p dir="rtl">从右到左</p> 或 <p dir="ltr">从左到右</p>）

11. element.firstChild：返回首个子节点

12. element.getAttribute()：返回元素节点的指定属性值

13. element.getAttributeNode()：返回指定的属性节点

14. element.getElementsByTagName()：返回拥有指定标签名的所有子元素的集合

15. element.getFeature()：返回实现了指定特性的 API 的某个对象

16. element.getUserData()：返回关联元素上键的对象

17. element.hasAttribute()：如果元素拥有指定属性，则返回true，否则返回 false。

18. element.hasAttributes()：如果元素拥有属性，则返回 true，否则返回 false。

19. element.hasChildNodes()：如果元素拥有子节点，则返回 true，否则 false。

20. element.id：设置或返回元素的 id

21. element.innerHTML：设置或返回元素的内容

22. element.insertBefore(newnode,existingnode)：在指定的已有的子节点之前插入新节点

23. element.isContentEditable：返回元素的内容是否可编辑

24. element.isDefaultNamespace()：检查被定义的命名空间是否是默认命名空间

25. element.isEqualNode()：检查两个节点是否相等

26. element.isSameNode()：检查两个元素是否是相同的节点

isSameNode() 方法检查两节点是否是相同的节点。
isSameNode() 方法返回 true，如果两节点是相同的节点，否则返回 false。
请使用 isEqualNode() 方法来检查两节点是否相等，但不必是相同节点。

27. element.isSupported()：检测指定节点是否支持指定特性

28. element.lang：设置或返回元素的语言代码

29. element.lastChild：返回元素的最后一个子元素

30. element.namespaceURI：返回指定节点的命名空间的 URI

31. element.nextSibling：返回指定节点之后紧跟的节点，在相同的树层级中

32. element.nodeName：返回元素的名称

33. element.nodeType：返回元素的节点类型

34. element.nodeValue：设置或返回元素值

35. element.normalize()：移除空的文本节点，并连接相邻的文本节点

36. element.offsetHeight、element.offsetWidth、element.offsetLeft、element.offsetTop、element.offsetParent：返回元素高度、宽度、水平偏移、垂直偏移、偏移容器

37. element.ownerDocument：返回元素的根元素（文档对象）

38. element.parentNode：返回元素的父节点

39. element.perviousSibling：返回位于相同节点树层级的前一个元素。

40. element.removeAttribute()：从元素中移除指定属性

41. element.removeAttributeNode()：移除指定的属性节点，并返回被移除的节点。

42. element.replaceChild()：从元素中移除子节点

43. element.scrollHeight、element.scrollWidth、element.scrollLeft、element.scrollTop：返回元素整体高度、宽度、左边缘与视图之间的距离、上边缘与视图之间的距离

44. element.setAttribute()：把指定属性设置或更改为指定值

45. element.setAttributeNode()：设置或更改指定属性节点

46. element.setIdAttribute()

47. element.setIdAttributeNode()

48. element.setUserData()：把对象关联到元素上的键

49. element.style：设置或返回元素的 style 属性

50. element.tabIndex：设置或返回元素的 tab 键控制次序

51. element.tagName：返回元素的标签名

52. element.textContent：设置或返回节点及其后代的文本内容

53. element.title：设置或返回元素的 title 属性

54. element.toString()：把元素转换为字符串

55. nodelist.iten()：返回 NodeList 中位于指定下标的节点

56. nodelist.length：返回 NodeList 中的节点数

Attribute对象

在 HTML DOM 中，Attr 对象表示 HTML 属性。

HTML 属性始终属于 HTML 元素。

Attr对象属性和方法

1. attr.isId：如果属性是 id 类型，则返回 true，否则返回 false

2. attr.name：返回属性的名称

3. attr.value：设置或返回属性的值

4. attr.specified：如果已指定属性，则返回 true，否则返回 false。

5. nodemap.getnamedItem()：从 NamedNodeMap 返回指定的属性节点

6. nodemap.item()：返回 NamedNodeMap 中位于指定下标的节点

7. nodemap.length：返回 NamedNodeMap 中的节点数

8. nodemap.removenamedItem()：移除指定的属性节点

9. nodemap.setNamedItem()：设置指定的属性节点（通过名称）

Event对象

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

事件句柄（Event Handlers）

1. onabort：图像的加载被中断

2. onblur：元素失去焦点

3. onchange：域内容被改变

4. onclick：点击

5. ondblclick：双击

6. onerror：在加载文档或图像时发生错误

7. onfocus：元素获得焦点

8. onkeydown：某个键盘按键被按下

9. onkeypress：某个键盘按键被按下并松开

10. onkeyup：某个键盘按键被松开

11. onload：加载

12. onmousedown：鼠标按下

13. onmousemove：鼠标移动

14. onmouseout：鼠标移开

15. onmouseover：鼠标移动元素之上

16. onmouseup：鼠标按键被松开

17. onreset：重置按钮被点击

18. onresize：窗口或框架被重新调整大小

19. onselect：文本被选中

20. onsubmit：确认按钮被点击

21. onunload：用户推出页面

鼠标/键盘属性

1. altKey：返回当事件被触发时，"ALT" 是否被按下

2. button：返回当事件被触发时，哪个鼠标按钮被点击

3.clientX：返回当事件被触发时，鼠标指针的水平坐标

4. clientY：返回当事件被触发时，鼠标指针的垂直坐标

5. ctrKey：返回当事件被触发时，"CTRL" 键是否被按下

6. metaKey：返回当事件被触发时，"meta" 键是否被按下

7. relatedTarget：返回与事件的目标节点相关的节点

8. screenX：返回事件发生时鼠标指针相对于屏幕的水平坐标。

9. screenY：返回事件发生时鼠标指针相对于屏幕的垂直坐标。

10. shiftKey：返回当事件被触发时，"SHIFT" 键是否被按下

标准Event属性/方法

属性	描述
bubbles	返回布尔值，指示事件是否是起泡事件类型。
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget	返回其事件监听器触发该事件的元素。
eventPhase	返回事件传播的当前阶段。
target	返回触发此事件的元素（事件的目标节点）。
timeStamp	返回事件生成的日期和时间。
type	返回当前 Event 对象表示的事件的名称。

方法	描述
initEvent()	初始化新创建的 Event 对象的属性。
preventDefault()	通知浏览器不要执行与事件关联的默认动作。
stopPropagation()	不再派发事件。

loren_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML DOM 对象

Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。Document对象集合1. all：提供对文档中所有 HTML 元素的访问2. anchors：...
复制链接

扫一扫

专栏目录