JavaScript入门
2016-04-21 15:28
525 查看
* DOM 文档对象模型
* Document
Object Model
* 文档:标记型文档
(HTML/XML)
* 对象:封装属性和行为(方法)
* 模型:共性特征的体现
* DOM解析HTML
* 通过DOM的方法,把HTML全部(元素(标签)、文本、属性)都封装成了对象。
<span id="spanId">文本</span>
* DOM想要操作标记型文档先解析。(解析器)
* DOM解析HTML(浏览器就可以HTML)
* 浏览器DOM解析HTML?
* DOM的三个级别:
* DHTML不是一种编程语言。
* html
:封装数据。 <span>展示给用户的数据</span>
* css :设置样式(显示效果)
* dom :操作HTML(解析HTML)
* js :提供逻辑(判断语句,循环语句)
* Document:代表整个文档。
* 方法:
getElementById("id的值");
通过元素的id的属性获取元素(标签)对象。
getElementsByName("name属性值");
通过名称获取元素对象的集合(返回数组)
getElementsByTagName("标签名称");
通过标签名称获取元素对象的集合(返回数组)
* write("文本的内容(html的标签)")
把文本内容写到浏览器上。
* createElement("元素名称");
创建元素对象
* createTextNode("文本内容")
创建文本对象
* appendChild("子节点")
添加子节点
<span id=""></span>
* Element对象
* 获取元素对象
* getAttribute("属性名称");
获取属性的值
* setAttribute("属性名称","属性的值");
设置或者修改属性的值
* removeAttribute("属性名称");
删除属性
* 获取元素下的所有子节点(*****)
* ul.getElementsByTagName();
* Node:节点对象
* nodeName
:节点名称
* nodeType
:节点类型
* nodeValue
:节点的值
* parentNode
获取父节点(永远是一个元素节点)
IE6-8 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? IE9-11 Chrome FireFox
firstChild 第一个节点 ? ? ? ? ? ? ? ? firstElementChild?第一个节点
lastChild最后一个节点、 ? ? ? ? ? ? ? lastElementChild 最后一个节点
nextSibling 下一同级节点 ? ? ? ? ? ? ?nextElementSibling?下一同级节点
previousSibling 上一同级节点 ? ? ? ? ?previousElementSibling?上一同级节点
<ul>
<li>北京</li>
</ul>
* 如果通过ul获取北京的子节点,使用是
ul.firstElementChild; 获取北京的子节点(IE9-11 Chrome FireFox)
* 但是如果IE6-8,需要使用firstChild;
<span id="spanId">
文本内容
</span>
* 使用span的标签获取span中间的文本内容(也是对象),需要使用firstChild;(不管是什么浏览器)
* 方法
* hasChildNodes()
检查是否包含子节点
* hasAttributes()
检查是否包含属性
* appendChild(node)
父节点调用,在末尾添加子节点
* insertBefore(new,old)
父节点调用,在指定节点之前添加子节点
* replaceChild(new,old)
父节点调用,替换节点
* removeChild(node)
父节点调用,删除节点
* cloneNode(boolean)
不是父节点调用,复制节点
* boolean
:如果是true,复制子节点
:如果是false,不复制子节点,默认是false
* innerHTML
:获取和设置文本内容。
* innerHTML属性:
* 获取文本内容
* 设置文本内容
* 事件:
onclick
点击事件
onload
加载事件
onfocus
获取焦点事件
onblur
失去焦点事件
* 全选/全不选/反选的练习
<input type="checkbox" />
* 指定默认值:checked
只要出现在<input type="checkbox" />,对号就勾上了。
* 鼠标移动的事件
onmousemove
onmouseout
onmouseover
* 鼠标点击事件(*****)
onclick
单击
ondblclick
双击
* 加载和卸载
* onload(*****)
加载
* onunload
卸载
* 获取焦点和失去焦点(*****)
* onfocus
获取焦点
* onblur
失去焦点
* 键盘
* onkeyup
按下抬起
* 改变事件(*****)
* onchange
* 控制表单的提交(*****)
onsubmit
* Document
Object Model
* 文档:标记型文档
(HTML/XML)
* 对象:封装属性和行为(方法)
* 模型:共性特征的体现
* DOM解析HTML
* 通过DOM的方法,把HTML全部(元素(标签)、文本、属性)都封装成了对象。
<span id="spanId">文本</span>
* DOM想要操作标记型文档先解析。(解析器)
* DOM解析HTML(浏览器就可以HTML)
* 浏览器DOM解析HTML?
* DOM的三个级别:
* DHTML不是一种编程语言。
* html
:封装数据。 <span>展示给用户的数据</span>
* css :设置样式(显示效果)
* dom :操作HTML(解析HTML)
* js :提供逻辑(判断语句,循环语句)
* Document:代表整个文档。
* 方法:
getElementById("id的值");
通过元素的id的属性获取元素(标签)对象。
getElementsByName("name属性值");
通过名称获取元素对象的集合(返回数组)
getElementsByTagName("标签名称");
通过标签名称获取元素对象的集合(返回数组)
* write("文本的内容(html的标签)")
把文本内容写到浏览器上。
* createElement("元素名称");
创建元素对象
* createTextNode("文本内容")
创建文本对象
* appendChild("子节点")
添加子节点
<span id=""></span>
* Element对象
* 获取元素对象
* getAttribute("属性名称");
获取属性的值
* setAttribute("属性名称","属性的值");
设置或者修改属性的值
* removeAttribute("属性名称");
删除属性
* 获取元素下的所有子节点(*****)
* ul.getElementsByTagName();
* Node:节点对象
* nodeName
:节点名称
* nodeType
:节点类型
* nodeValue
:节点的值
* parentNode
获取父节点(永远是一个元素节点)
IE6-8 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? IE9-11 Chrome FireFox
firstChild 第一个节点 ? ? ? ? ? ? ? ? firstElementChild?第一个节点
lastChild最后一个节点、 ? ? ? ? ? ? ? lastElementChild 最后一个节点
nextSibling 下一同级节点 ? ? ? ? ? ? ?nextElementSibling?下一同级节点
previousSibling 上一同级节点 ? ? ? ? ?previousElementSibling?上一同级节点
<ul>
<li>北京</li>
</ul>
* 如果通过ul获取北京的子节点,使用是
ul.firstElementChild; 获取北京的子节点(IE9-11 Chrome FireFox)
* 但是如果IE6-8,需要使用firstChild;
<span id="spanId">
文本内容
</span>
* 使用span的标签获取span中间的文本内容(也是对象),需要使用firstChild;(不管是什么浏览器)
* 方法
* hasChildNodes()
检查是否包含子节点
* hasAttributes()
检查是否包含属性
* appendChild(node)
父节点调用,在末尾添加子节点
* insertBefore(new,old)
父节点调用,在指定节点之前添加子节点
* replaceChild(new,old)
父节点调用,替换节点
* removeChild(node)
父节点调用,删除节点
* cloneNode(boolean)
不是父节点调用,复制节点
* boolean
:如果是true,复制子节点
:如果是false,不复制子节点,默认是false
* innerHTML
:获取和设置文本内容。
* innerHTML属性:
* 获取文本内容
* 设置文本内容
* 事件:
onclick
点击事件
onload
加载事件
onfocus
获取焦点事件
onblur
失去焦点事件
* 全选/全不选/反选的练习
<input type="checkbox" />
* 指定默认值:checked
只要出现在<input type="checkbox" />,对号就勾上了。
* 鼠标移动的事件
onmousemove
onmouseout
onmouseover
* 鼠标点击事件(*****)
onclick
单击
ondblclick
双击
* 加载和卸载
* onload(*****)
加载
* onunload
卸载
* 获取焦点和失去焦点(*****)
* onfocus
获取焦点
* onblur
失去焦点
* 键盘
* onkeyup
按下抬起
* 改变事件(*****)
* onchange
* 控制表单的提交(*****)
onsubmit
相关文章推荐
- js回调函数
- js多个输入框运算计算结果输出到另一个输入框
- js根据不一样的移动设备调整到相应的页面
- JS中的call()方法的理解
- javascript继承实现
- JSP和Servlet那点事
- js操作cookie
- 图片实时预览JSP加js
- JS中对this的理解
- js中要声明变量吗?
- Json和String的转换
- JavaScript的瀑布流效果的详解及实现
- JS基础知识第一弹
- JavaScript入门
- javascript之typeof、constructor、instanceof
- JS四舍五入方法
- 7个JS基础知识总结
- JS全选反选
- 图片加载完毕后执行JS代码
- javascript基础四 (事件应用鼠标滚轮)