BCSP-玄子前端开发之JavaScript+jQuery入门CH04_DOM操作
4.4 操作 DOM
DOM：Document Object Model（文档对象模型）
4.5 节点与节点的关系
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a13bkdpQ-1682304656665)(./assets/image-20230422173719655.png)]
4.5.1 节点信息
4.5.2 nodeName：节点名称
- 元素节点的标签名称
- 属性节点的属性名称
- 文本节点的nodeName永远是 #text
- 文档节点的nodeName永远是 #document
4.5.3 nodeValue：节点值
- 文本节点包含的文本
- 属性节点的属性值
- 对文档节点和元素节点不可用
4.5.4 nodeType：节点类型
| 节点类型 | nodeType值 |
|---|
| Element (元素) | ELEMENT_NODE (1) |
| Attr (属性) | ATTRIBUTE_NODE (2) |
| Text (文本) | TEXT_NODE (3) |
| Comment (注释) | COMMENT_NODE (8) |
| Document (文档) | DOCUMENT_NODE (9) |
4.6 访问节点
使用getElement系列方法访问指定节点
- getElementById()
- getElementsByName()
- getElementsByTagName()
4.6.1 node 属性
| 属性名称 | 描述 |
|---|
| parentNode | 返回节点的父节点 |
| childNodes | 返回子节点集合，childNodes[i] |
| firstChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibling | 返回下一个节点 |
| previousSibling | 返回上一个节点 |
格式化文档所添加的换行、回车、缩进等字符构成文本节点，干扰节点访问
| <div id="desc"> |
| <h2>关注我们</h2> |
| <ul> |
| <li>新浪微博</li> |
| <li>官方微信</li> |
| <li>联系我们</li> |
| <li>公益基金会</li> |
| <li>服务网点</li> |
| </ul> |
| </div> |
4.6.2 element 属性
| 属性名称 | 描述 |
|---|
| firstElementChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastElementChild | 返回节点的最后一个子节点 |
| nextElementSibling | 下一个节点 |
| previousElementSibling | 上一个节点 |
4.6.3 兼容写法
| oNext = oParent.nextElementSibling || oParent.nextSibling |
| oPre = oParent.previousElementSibling || oParent.previousSibling |
| oFirst = oParent. firstElementChild || oParent.firstChild |
| oLast = oParent.lastElementChild || oParent.lastChild |
4.7 操作节点样式
4.7.1 style 属性
| document.getElementById("titles").style.color="#ff0000"; |
| document.getElementById("titles").style.fontSize="25px"; |
| 类别 | 属性 |
|---|
| 背景 | backgroundColor、backgroundImage、backgroundRepeat |
| 文本 | font、fontSize、fontWeight、textAlign、textDecoration、color |
| 边距 | padding、paddingTop 、paddingBottom、paddingLeft、paddingRight |
| 边框 | border、borderTop、borderBottom、borderLeft、borderRight |
JavaScript中,使用CSS样式与在HTML中稍有不同。
例如：JavaScript中访问font-size的写法是fontSize
4.7.2 mouse 事件
| 名称 | 描述 |
|---|
| onclick | 当用户单击某个对象时调用事件 |
| onmouseover | 鼠标移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| onmousedown | 鼠标按钮被按下 |
| onmouseup | 鼠标按键被松开 |
4.7.3 className 属性
| HTML元素.className="class样式名" |
| function over() { |
| document.getElementById("cart").className="cartOver"; |
| document.getElementById("cartList").className="cartListOver"; |
| } |
| function out() { |
| document.getElementById("cart").className="cartOut"; |
| document.getElementById("cartList").className="cartListOut"; |
| } |
4.8 获取元素的样式
| alert(document.getElementById("cartList").style.display); |
只能获取内联样式的属性值
| document.defaultView.getComputedStyle(元素,null).属性; |
| var cartList=document.getElementById("cartList"); |
| alert(document.defaultView.getComputedStyle(cartList, null).display); |
不兼容IE6-8
| HTML元素. currentStyle.样式属性; |
| alert(document.getElementById("cartList").currentStyle.display); |
IE的用法
| function getStyle(obj, attr) { |
| return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; |
| } |
浏览器兼容的做法
BCSP-玄子前端开发之JavaScript+jQuery入门CH04_DOM操作
