目录
Javascript基本整理<3>
@[基本示例DOM|基于bootstrap框架]
JavaScript DOM简介
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
JavaScript 查找DOM元素
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
通过类名找到 HTML 元素
通过id查找元素
var x=document.getElementById("intro");
通过签名查找元素
var x=document.getElementByTagName("p");
通过类名查找元素
var x=document.getElementByClassName("btn");
JavaScript改变HTML
JavaScript改变HTML内容
document.getElementById(id).innerHTML=new HTML;//举例Old Header
JavaScript改变HTML属性
document.getElementById(id).attribute=new value;//举例
JavaScript改变CSS
document.getElementById(id).style.property=new style;//举例 改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时My Heading 1
JavaScript DOM事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码： οnclick=JavaScript HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
//在本例中，当用户在元素上点击时，会改变其内容：
请点击该文本
//从事件处理器调用一个函数请点击该文本
//使用 HTML DOM 来分配事件
JavaScript DOM元素节点
创建新的 HTML 元素
这是一个段落
这是另一个段落
删除已有的HTML元素
这是一个段落。
这是另一个段落。