HTML DOM对象及各种方法

HTML DOM Document 对象

(一) HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

• 文档是一个文档节点。
• 所有的HTML元素都是元素节点。
• 所有 HTML 属性都是属性节点。
• 文本插入到 HTML 元素是文本节点。
  -注释是注释节点。

(二)Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

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

(三) 方法

1. getElementById() 方法

document.getElementById('confirmEleField').scrollIntoView() 

2. querySelector() 方法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

获取文档中 class="example" 的第一个<p> 元素:
document.querySelector("p.example");

function myFunction() {
    document.querySelector("a[target]").style.border = "10px solid red";
}
............

<p> CSS 选择器 a[target] 确保所有有 target 属性的链接背景颜色为黄色：</p>
<a href="//www.w3cschool.cc">w3cschool.cc</a>
<a href="//www.disney.com" target="_blank">disney.com</a>
<a href="//www.wikipedia.org" target="_top">wikipedia.org</a>
<p>点击按钮为带有 target 属性的链接添加红色背景。</p>
<button onclick="myFunction()">点我</button>

运行效果：

scrollIntoView()方法

参考的文章有： 文章1、 文章2