A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 田忠富 中级黑马   /  2013-10-20 21:58  /  1642 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

  通过HTML DOM,可访问JavaScript HTML文档的所有元素。


   HTML DOM 模型被构造为对象的树。

HTML DOM 树

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

c查找HTML元素三种方法:

           1、通过id找到HTML元素 var x = document.getElementById("intro");

           2、通过标签名找到HTML元素 var x = document.getElementById("main"); var y=x.getElementsTagName("p");

           3、通过类名找到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找到了父元素


评分

参与人数 1技术分 +1 收起 理由
狼王 + 1 很给力!

查看全部评分

2 个回复

倒序浏览
受益了!!!!!!!!!!!~
回复 使用道具 举报
请问你有没有毕向东老师javascript中链接的doctool.js源码啊
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马