BCSP-玄子前端开发之JavaScript jQuery入门CH04_DOM操作

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 属性

HTML元素.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 获取元素的样式

HTML元素.style.样式属性;

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操作