DOM (操作网页)

本文介绍了DOM的核心概念,包括Domcore、HTML-DOM和CSS-DOM节点类型,展示了如何通过getElement系列方法和节点关系访问元素。此外,还讲解了设置和获取元素样式的方法,如style属性、eventlisteners和getComputedStyle函数的使用。
摘要由CSDN通过智能技术生成

DOM的分类
1.Dom core(核心)
2.HTML-DOM
3.CSS-DOM
DOM节点就是标签或元素
整一个文档是一个文档节点
每一个HTML标签是一个元素节点(p span h1)
包含在html元素中的文本是文本节点
注释属于注释节点
在这里插入图片描述

节点信息
nodeName(节点名称)含有某个节点的名称
nodeValue(节点值)
nodeType(节点类型)
元素节点的nodeName是标签名称 属性节点的nodeName是属性名称 文本节点的nodeName永远是text 文档节点的nodeName永远是document
nodeType是返回节点的类型
元素element 节点类型是1
元素atter 节点类型是2
元素Text 节点类型是3
元素commments 节点类型是8
元素document 节点类型是9
访问节点
1.通过getElement系列方法访问指定节点
getElementById(); 返回指定id的对象引用(唯一)如果有多个元素具有相同的 ID,该方法仅返回第一个匹配的元素
getElementByName();通过元素的 name 属性获取文档中所有具有指定名称的元素 可以返回多个元素
getElementByTagName():获取指定标签名的对象集合
querySelectorAll(‘.myClass’); 可获取多个元素
2.通过节点的层次关系访问节点
parentNode 返回当前节点的父节点
childNodes 返回子节点集合
firstChild 返回节点的第一个子节点 通常访问文本节点
lastChild 返回节点的最后一个子节点
nextSlibing 返回下一个节点
previousSibing 返回上一个节点
使用这种方法返回出来的集合 可能会有text 这是换行导致的 为了解决这个问题 提供了以下属性!!!
firstElementChild 返回节点的第一个子节点 通常用来访问文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibing 返回指定节点的下一个兄弟节点
previousElementSibing 返回指定节点的上一个兄弟节点
设置元素样式
style属性设置样式
HTML元素.style.样式属性=“值”;
在js中-表示减号因此遇见语法带-需变成.号
事件
onload:页面或图像完成加载时
onclick:单击
onmouseover:鼠标指针移到某元素
onmouseout:鼠标指针移到某个元素
onkeydown:某个键盘按键被按下
onmouseup 鼠标按键被松开
className属性设置样式
HTML元素.className=“样式名称”;
使用 className 属性来设置元素的 CSS 类名 也可用来更改或移除
获取元素的样式
HTML元素.style.样式属性;
这种方法只能获取到内联样式表 而不能获得外部样式和内部样式
getComputedStyle();
语法为:document.defauktView.getComputedStyle(元素,null).属性;
在ie6~8无法使用 如果在工作时需使用到应使用
currentStyle对象
语法:HTML元素.currentStyle.样式属性;
只读而不能给属性赋值 需使用style对象

  • 10
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值