DOM与Javascript上

DOM : Document Object Model 文档对象模型

文档:html页面

文档对象:页面中元素

文档对象模型:定义 为了能够让程序(js)去操作页面中的元素

DOM会把文档看作是一棵树,同时定义了很多方法来操作这棵数中的每一个元素(节点)

DOM节点

•childNodes \ children

–获取第一级子元素

–有兼容性问题(空白节点), nodeType属性

•firstChild \ firstElementChild

–获取子元素里的第一个

•lastChild \ lastElementChild

–获取子元素里的最后一个

•nextSibling \ nextElementSibling

–获取指定元素的下一个兄弟节点

•previousSibling \ previousElementSibling

–获取指定元素的上一个兄弟节点

parentNode

–获取父节点,点击链接隐藏整个li

parentNode&offsetParent区别

–offsetLeft \offsetTop

–offsetWidth \ clientWidth

有兼容性问题,标准下不能获取两层

获取:getAttribute(名称)

设置:setAttribute(名称,值)

删除:removeAttribute(名称)

第三种方式的好处:自定义属性、相对网址

创建DOM元素

•createElement(标签名) 创建一个节点

•appendChild(节点) 追加一个节点

–例子:留言板插入内容

插入元素

•insertBefore(节点, 原有节点)在已有元素前插入

–例子:倒序留言板插入内容

删除DOM元素

•removeChild(节点) 删除一个节点

–例子:删除留言

替换DOM元素

•replaceChild(节点, 已有节点)替换节点

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容