js抓取网页内容(【知识点】DOM及DOM0级事件概述，你了解多少？)

　　js抓取网页内容(【知识点】DOM及DOM0级事件概述，你了解多少？)

　　1.DOM 和 DOM0 级事件概述

　　DOM，由三个词组成，Document（文档）Object（对象）Mode（模型）

　　1.文档，即整个HTML网页文档

　　2.对象，即网页的“每个”部分，这些对象类似于 HTML 标签，

　　连评论都是对象，让 JS 更自由地操作网页界面

　　3.模型，用于表达对象之间的关系，方便对象的获取

　　DOM的作用是通过JS来操作网页

　　节点，DOM 中的一个关键概念

　　节点：网页的每个部分都是一个节点，无论是标签还是属性，以及文本。我们的共同节点

　　分为四类：

　　上图中，属性节点也有颜色、宽度、高度等标签属性。

　　2.DOM0级事件的应用

　　DOM 事件，后面跟一个 0 级，表示后面的内容是 DOM 中最基本的事件。

　　首先我们了解获取元素节点（HTML标签）的方法

　　方法

　　描述

　　document.getElementById(id)

　　通过元素 id 获取 DOM 对象。

　　document.getElementsByTagName（HTML 标签）

　　通过标签名称获取一个或多个 DOM 对象。

　　document.getElementsByClassName(class)

　　通过类名获取一个或多个 DOM 对象。

　　document.getElementsByName(name)

　　按名称获取一个或多个 DOM 对象。

　　document.querySelector（CSS 选择器）

　　通过 CSS 选择器选择一个元素。

　　document.querySelectorAll（CSS 选择器）

　　通过 CSS 选择器选择多个元素。

　　获取 HTML 值

　　方法

　　描述

　　元素 node.innerText

　　获取 HTML 元素的内部 Text。

　　元素 node.innerHTML

　　获取 HTML 元素的内部 HTML。

　　元素节点属性

　　获取 HTML 元素的属性值。

　　元素节点.getAttribute（属性）

　　获取 HTML 元素的属性值。

　　元素 node.style.style

　　获取 HTML 元素的内联样式值。

　　事件：用户与浏览器中内容的交互属于事件，如按钮点击、鼠标移动、

　　点击链接等，事件并不关键，关键是处理事件，我们需要一个行为来处理事件

　　做一个过程

　　事件处理：在事件对应的属性中设置一些JS代码，以便在事件触发时执行代码。

　　DOM中有很多事件交互行为语句。我们常用鼠标点击、鼠标移动、鼠标释放等。

　　我们通常使用按钮对应的事件绑定函数来处理事件。当触发条件时（如点击按钮、关闭页面），会调用相应的函数，并执行函数中的语句。此方法称为 HTML 事件

　　DOM 事件将 HTML 和 JS 代码分开，使代码更清晰，更易于维护。

　　请参见以下示例：

333

444

呃呃

var tk1 = document.getElementById("tak");

//通过无序列表的ID获取无序列表的元素

var tk2 = document.getElementById("tck");

//通过按钮的ID获取按钮的元素

tk2.onclick = function(){

//按钮被点击时触发函数

tk1.innerHTML = "555666"

//内容是将无序列表的内容换成引号内的代码

}

//script标签在被执行代码的下面，因为代码是自上而下的执行，所以这样能避免不必要的错误

//这样就更改了网页内的内容，并且JS代码与HTML代码是分开的

　　当然，这只是最简单的 DOM 应用程序。通过这个例子，可以初步了解一些代码和语句的用法。