JavaScript第6课-JS HTML DOM
来源:互联网 发布:m2m 物联网 java 技术 编辑:程序博客网 时间:2024/05/29 14:11
通过HTML DOM,可访问JavaScript HTML文档的所有元素。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
c查找HTML元素三种方法:
通过id找到HTML元素 var x = document.getElementById("intro");
通过标签名找到HTML元素 var x = document.getElementById("main"); var y=x.getElementsTagName("p");
通过类名找到HTML元素 在IE5,6,7,8,中无效
改变HTML内容:
document.getElementById(id).innerHTML= new HTML
改变HTML属性:
document.getElementById(id).attribute=new value
改变HTML样式:
document.getElementById(id).style.property=new style
<p id="p2">Hello World!</p><script>document.getElementById("p2").style.color="blue";</script>
改变P元素的样式
visibility分为hidden和visible
JS HTML DOM 事件
HTML 事件的例子:
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
onload和onunload事件会在用户进入或离开页面是被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange事件常结合对输入字段的验证来使用。upperCase()函数将小写转换为大写
onmouseover和onmouseout事件可用于用户的鼠标移至HTML元素上方或移出元素时触发函数
onmousedown,onmouseup以及onclick事件
如需要向HTML DOM添加新元素,您必须首先创建该元素(元素节点),然后向一个已经存在的元素添加该元素。
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");//创建新的<p>元素
var node=document.createTextNode("这是新段落。");//如需向元素添加文本,必须首先创建文本节点
para.appendChild(node);//追加这个文本节点
var element=document.getElementById("div1");//找到一个已有的元素
element.appendChild(para);//向这个已有的元素追加新元素
</script>
</body>
</html>
删除子元素的方法:parent.removeChilid(child);
找到子元素后
var child=document.getElementById("p1");child.parentNode.removeChild(child);
就用parentNode找到了父元素
- JavaScript第6课-JS HTML DOM
- JavaScript循环、JS HTML DOM、JS Window
- JS基础第6课:认识DOM
- 【JS学习笔记】06 JavaScript HTML DOM 事件
- JavaScript学习笔记(二)--JS HTML DOM
- HTML,javascript,image等加载,DOM解析,js执行生命周期
- javascript 操作 HTML DOM
- javascript 操作 HTML DOM
- javascript 操作 HTML DOM
- javascript 操作 HTML DOM
- javascript 操作 HTML DOM
- HTML DOM & JavaScript & CSS
- JavaScript HTML DOM 对象
- HTML、JavaScript、Dom、css
- JavaScript HTML DOM
- JavaScript HTML DOM 事件
- JavaScript HTML DOM
- JavaScript HTML DOM 事件
- 创业杂谈
- POJ 1330 LCA入门题(Tarjan)
- eclipse web工程导入到Tomcat
- 面试体验:Microsoft 篇
- C++之const
- JavaScript第6课-JS HTML DOM
- [智力题] 用信息熵解决天平跟毒药问题
- JAVA可重入锁ReentrantLock和synchronized关键字
- 多元huffman码变形
- MFC实现画图工具中的画线功能(一)
- 面试体验:Facebook 篇
- RAC维护工具集
- to_yminterval
- 解决wordpress3.5安装插件和主题失败的问题