JS基础知识之:DOM学习_js学习dom-CSDN博客

本文链接：https://blog.csdn.net/kingmicrosoft/article/details/44871287

DOM学习

1. HTML哪些是元素节点，…..具体是哪些；

首先弄清楚几点：

DOM结点:

DOM的原子是元素节点(element node) <body><ul>...

文本节点并非所有的元素结点都有文本结点

<p title=”title_test”>content is p</p>

属性结点

属性的作用是对元素做出更为详细的描述如title属性

<p title=”title_test”>content is p</p>

包含元素结点,属性结点,文本结点组合成一个对象, getElementById(eg...)方法得到都是结点对象

对应的, nodeType属性是可以区分这些结点类型的

2. JS通过什么方式得到节点？

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素：

通过使用 getElementById() 方法

         返回指定ID的第一个对象

通过使用 getElementsByTagName() 方法

        getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

通过使用 getElementsByName() 方法

       返回带有指定名称(name)的对象集合。

3.节点是个什么?

每个DOM节点都是包含属性和方法的可访问对象；DOM对象包括元素对象，属性对象，事件对象；

个人理解为即DOM对象=元素结点对象+属性对象+事件对象；那么问题来了，

既然是对象,那么自然少不了属性和方法

1. DOM元素结点对象的属性；方法；有哪些？

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

A.属性：（列几种）

1.innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。

2.firstChild返回指定节点的第一个子节点；

3.nextSibling

当前结点的下一个结点

4.nodeName 属性

nodeName 属性规定节点的名称。

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

....

B.方法：

常见一些 DOM 对象方法

getElementById()


返回带有指定 ID 的元素。

getElementsByTagName()


返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

getElementsByClassName()


返回包含带有指定类名的所有元素的节点列表。

appendChild()


把新的子节点添加到指定节点。

removeChild()


删除子节点。

replaceChild()


替换子节点。

insertBefore()


在指定的子节点前面插入新的子节点。

createAttribute()


创建属性节点。

createElement()


创建元素节点。

createTextNode()


创建文本节点。

getAttribute()


返回指定的属性值。

setAttribute()


把指定属性设置或修改为指定的值。

2. 属性对象--很少涉及

Attr 对象

在 HTML DOM 中, Attr 对象代表一个 HTML 属性。

注意：HTML属性总是属于HTML元素。

NamedNodeMap 对象

在 HTML DOM 中, the NamedNodeMap 对象表示一个无顺序的节点列表。

我们可通过节点名称来访问 NamedNodeMap 中的节点。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 Attr 对象和 NamedNodeMap 对象。

DOM 4 警告 !!!

在 W3C DOM 内核中, Attr (属性) 对象继承节点对象的所有属性和方法。

在 DOM 4 中, Attr (属性) 对象不再从节点对象中继承。

从长远的代码质量来考虑，在属性对象中你需要避免使用节点对象属性和方法。

3. 事件对象

事件肯定就是对应事件触发了；
   1). 事件有哪些呢?
常用的有onclick, onload, onmouseover...
参考：http://www.w3school.com.cn/jsref/dom_obj_event.asp

   2). Event对象是什么?
包含事件的属性和事件方法的一个对象
参考:
http://othella.iteye.com/blog/277910

   3). 如何绑定多个事件? 如何动态绑定事件呢?
使用 W3C DOM 的 addEventListener() 方法就行,感觉这个兼容性好点

obj.addEventListener("click", Foo, false);
function Foo()
{
     alert("测试");
}
同样,绑定多个事件类型也没有问题
obj.addEventLister("click", Foo, false);

具体参考
http://www.jb51.net/article/44818.htm


参考:

DOM结点知识:
http://www.w3cschool.cc/jsref/dom-obj-attributes.html

DOM艺术这本书的介绍:

http://www.cnblogs.com/hustlzp/archive/2011/08/11/the-reading-note-of-the-book-DOM-Scripting.html