JS基础知识之:DOM学习
2015-04-04 10:28
459 查看
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
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Js学习---妙味课堂2-2 （说一些DOM的基础知识）
- js基础学习第二天（关于DOM和BOM）二
- js基础学习第一天（关于DOM和BOM）一
- Node.js学习--基础知识（4）--模块与包
- Node.js学习--基础知识（9）--HTTP客户端
- [JS基础]JavaScript精简学习1：基础知识
- JavaScript学习笔记（一）——JS基础知识介绍
- js基础学习第一天（关于DOM和BOM）一
- Node.js学习--基础知识（7）--fs
- 黑马程序员-- Dom基础知识学习笔记1
- Js_基础知识学习_02
- 根据w3cSchool学习javascript整理js的一些基础知识
- Node.js学习--基础知识（3）--回调函数与事件
- JavaScript 入门基础知识 想学习js的朋友可以参考下
- js基础知识相关学习笔记记录
- Node.js学习--基础知识（1）--入门
- Js_基础知识学习_01
- Node.js学习--基础知识（6）--常用工具util和事件EventEmitter
- Node.js学习--基础知识（8）--全局对象和全局变量
- Node.js学习--基础知识（2）--异步IO与事件式编程