html dom要学吗,HTML_DOM学习

HTML DOM 树

6960d0bf34c06fdfa5aefb6bf2d4f58c.gif

通过ID/类名/标号可以定位HTML元素,然后可用JS改变这些元素的样式内容,并对DOM事件作出反应

对HTML事件的响应:

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

onload 和 onunload: 事件可用于处理 cookie

resize:重置浏览器事件(向winwows添加事件句柄)。

onfocus、onchange 事件:输入字段获得焦点、和失去焦点后。

添加和删除事件的侦听:element.addEventListener(event, function, useCapture);

removeEventListener():

早期的一些浏览器不支持的用以下替代:element.attachEvent(event, function);element.detachEvent(event, function);

如document.getElementById("myBtn").addEventListener("click", displayDate);//注意事件用click而不能用onclick

事件传递的顺序:冒泡(内部先触发,在触发外部)和捕获(外部先触发,在触发内部),即useCapture参数:默认值为 false, 即冒泡传递,用在当

夹在

中间时的触发先后顺序问题。

节点文本的添加(在前添加、在后添加)、删除、和替换:

添加:var para = document.createElement("p");

var node = document.createTextNode("这是一个新的段落。");

para.appendChild(node);//p和内容的绑定

var element = document.getElementById("div1");//查找一个已有元素

element.appendChild(para);//在一个已有的元素容器中添加新的元素

var child = document.getElementById("p1");

element.insertBefore(para, child);/*在一个已有元素容器的某个元素的前面添加*/

parent.removeChild(child);/*删除某个指定元素*/

或不用父节点的删除child.parentNode.removeChild(child);

parent.replaceChild(para, child);//用新创建的某个元素替换已有的某个元素

通过

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值