DOM一些易忘点

本文探讨了DOM操作的各种方法,如childNodes与children的区别、innerHTML与appendChild的应用场景、createElement的注意事项等。同时介绍了offset系列属性的含义及用法,以及事件对象的处理,包括常用的事件属性和方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

childNodes和children
在不同浏览器中对于内容的解释有小差别
innerHTML和appendChild
innerHTML很万金油,可读又可写(只要你想,网页都能弄出来);appendChild更容易有结构性
createElement
非必要情况不要在创建的对象中写样式,常用写法是在css文件中写相关的类,
然后给这个对象添加这个类名(**.className = 'box'或**.setAttribute('class','box');),移除属性用removeAttribute()
offset
offsetWidth =  width  + border  +  padding
offsetHeight同理
offsetLeft返回距离上级盒子(最近的***带有定位***)左边的位置
offsetLeft 从父级的padding 开始算    父亲的border 不算
总结一下:  就是子盒子到定位的父盒子边框到边框的距离
offsetTop同理,并且是由代表标签的变量调用
事件对象
对象事件对应的函数中添加event这个形参,为了兼容性如下写:
 var event = event || window.event;
 重要的几个属性:
 clientX、clientY……
scrollTop和scrollLeft
网页被隐藏的距离,使用window对象调用
setInterval和setTimeout
前者有返回值,用于控制计时器的开/关,大部分计时器都不会让其一直运行
一些需要调整兼容性的东西
scrollTop/scrollLeft、event、获取标签当前的属性、input的输入事件、
浏览器不支持getElementsByClassName情况下需要自己写(使用GetElementsByTagName('*')+自定义数组)
不同浏览器获取兄弟节点或子节点写法有差异
获得选中文字(window.getSelection().toString();||document.selection.creatRange().text;)
不同浏览器获得屏幕宽度写法不一样、去除事件回溯写法有差异
获得事件产生源的ID:
var targetId = event.target ? event.target.id : event.srcElement.id;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值