HTML DOM基本概念及Element.getAttribute("value") 与Attribute.value差异

今晚整理博客的时候写个js, 发现了一个坑.. 一不小心就掉进去的坑..

本来想针对此坑写写见解就完了, 但觉得趁这个机会顺便再次说一下HTML DOM相关的东东.

在开始之前我先引出几个问题, 由此引出后面的话题, 也算是作为本人个人的学习笔记, 与大家共勉.

我们先来提3个问题.

HTML DOM是什么?

HTML DOM 的全称为: HTML Document Object Model, 意思是: 文档对象模型. 我们常说的DOM, 就是HTML DOM. DOM是对HTML文档里所有的一个统称, 一个规范.

打开 w3c的网站 http://www.w3school.com.cn/htmldom/index.asp

这里对HTML DOM做出了解释.

第一句话就是:

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 将 HTML 文档表达为树结构。

由上面我们可以知道, HTML DOM只是一种定义, 用来定义HTML文档的访问和操作的一种方法而已.

那么图中的HTML DOM树, 就是用HTML DOM用来将HTML的结构定义成一种树状结构而已.

在点开http://www.w3school.com.cn/htmldom/dom_intro.asp这个页面, 可以看到这么一段.

w3c又说DOM是W3C的标准. 可见, DOM只是用来定义HTML的一种规范一个标准而已.

HTML DOM节点是什么?

由上面我们知道DOM是用来定义东西的.

那么他是怎么定义的呢?

打开http://www.w3school.com.cn/htmldom/dom_nodes.asp, 看到下面的这个说明.

那么我们知道DOM是把HTML中的所有东西都定义成节点, 或者通俗点的说在DOM的世界里他认为HTML文档中的所有东西都是节点(理解一下这个加粗的文本).

把节点分为以下5个类型.

1. 整个文档是一个文档节点

2. 每个 HTML 元素是元素节点

3. HTML 元素内的文本是文本节点

4. 每个(HTML元素中的) HTML 属性是属性节点

5. 注释是注释节点

好了, 通过这个, 我们知道HTML DOM节点是上面的那5种类型.

那么有人之前可能还疑惑HTML元素和HTML DOM节点什么关系? 其实通过上面, 我们已经知道HTML元素只是HTML DOM节点的其中一种类型.

但我们大多数人一想到HTML DOM节点就会条件反射的认为不就是HTML元素嘛, 其实不然, HTML元素只是HTML DOM节点的中的一种.

注意: 虽然HTML元素(节点)只是DOM节点的一种, 但我们操作DOM节点时, 实际上是用元素方法,属性,事件来操作HTML元素, 所以我们会认为大部分的时候我们操作的DOM节点都是HTML元素.

再次强调: HTML元素不等于HTML DOM节点, HTML元素只是HTML DOM节点中的其中一种, HTML元素也更不等于HTML DOM, HTML DOM是用来定义HTML文档中所有内容的一种规范. 注意是所有内容而不是单单代表HTML元素.

HTML DOM对象是什么?

我们打开: http://www.w3school.com.cn/jsref/index.asp

这个页面, 我们可以看到在左侧有个这一栏目.

下面4个子项.可以看出

HTML DOM对象一共包含:

1. DOM Document对象(文档对象)

2. DOM Element对象(元素对象)

3. DOM Attribute对象(属性对象)

4. DOM Event对象(事件对象)

上面4个图是w3c官方给的解释, 不难理解, 他所说的意思就是说这些对象是用来表示HTML DOM节点的. 分别对应文档节点, 元素节点, 属性节点以及元素的事件.

那么对象就很好理解了.就是另一种表现形式而已.DOM节点有的方法和属性他们都有.

但有个区别就是, 也是我之前遇到的坑.

Element对象和Attribute对象, 他们的关系是: 元素对象包含属性, 属性对象也包含属性.那么怎么区分呢.以我遇到的坑来说明一下.

<input name="username" value="tom" id="in" />

按照w3c的意思, input元素现在是input元素对象.

但input元素里的name啊, value这些属性是Attribute对象.

听起来有点绕.继续以代码来说

<script>
    document.username.name="123";
    // 这种方式获取到的是Attribute对象.

    var ele = document.getElementById("#in");
    // 而这种方式拿到的Element对象.
</script>

如果大家不能理解, 请运行一下这段代码.

在运行时候, 先把原来的123删掉, 输入一些别的东西.

然后单击按钮弹出2个提示框, 看一下前后2个值. 就知道两个值不一样了.

我的输出结果是:

Attribute对象访问value属性方式: 12312321321321

111.html:16 Element对象调用getAttribute()方法方式: 123

<form action="#" method="get" name="form">
    <input type="text" name="aa" value="123"/>
</form>
<button onclick="cc()">get value</button>
<script type="text/javascript">
    function cc() {
        alert("Attribute对象访问value属性方式: " + document.form.aa.value); // 这个会弹出你输入的值.
        alert("Element对象调用getAttribute()方法方式: " + document.form.aa.getAttribute("value")); // 而这个每次都弹出123.
    }
</script>   

因为一个拿到的是Element对象, 一个拿到的是Attribute对象.

2者区别是:

1. Attribute对象拿到的是内存中的数据.

2. Element对象拿到的是元素中的数据.

而元素中的数据是不会变的. 这点可以通过审查元素来看.

如图所示, 我在输入12312321321321之后, 元素里的123并没有改变.

现在我们知道区别了. 但我想大家可能还有个疑惑的地方, 那就是, 我怎么知道用Attribute对象的方式去访问属性?

在问这个问题之前, 先要知道Attribute对象里面都有哪些属性.

可以在http://www.w3school.com.cn/jsref/dom_obj_attributes.asp这里看到有以下这些属性.

那么怎么以属性的方式访问呢?

其实很简单, 看一下下面的代码.

var input = document.getElementBy("in");// 我们知道这个是拿到某个元素.

var value = input.value; // 这样写就是访问Attribute对象的方式去访问元素value属性.
var value1 = input.getAttribute("value"); // 而这样写是调用Input这个Element对象的方式去访问元素的属性.

// 以及在属性上面也是不一样的.
input.value = "al0n4k"; // 这样写是以Attribute对象的方式去设置属性.
input.setAttribute("value", "al0n4k"); // 这样就是用Element对象的方式去设置属性.

注意: 通过Element对象设置元素的属性时, 不会写到内存中, 这时候用Attribute对象方式访问属性是无法获取到修改后的值的. 在表单提交时, 这是一个坑. 如果要设置值, 用Attribute对象的方式去访问元素的属性然后设置值.