JavaScript操作DOM对象

JavaScript操作DOM对象

DOM：document object model（文档对象模型）

访问节点

1. 使用getElement系列方法访问指定节点：
   1. getElementById()
   2. getElementsByName()
   3. getElementsByTagName()
2. 根据层次关系访问节点

节点属性

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

节点信息

1. nodeName：节点名称

2. nodeValue：节点值

3. nodeType：节点类型

   节点类型	node type值
   元素element	1
   属性attr	2
   文本text	3
   注释comments	8
   文档document	9

操作节点

1. 操作节点的属性

getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)

2. 创建和插入节点

名称	描述
createElement( tagName)	创建一个标签名为tagName的新元素节点
A.appendChild( B)	把B节点追加至A节点的末尾
insertBefore( A,B）	把A节点插入到B节点之前
cloneNode(deep)	复制某个指定的节点

3. 删除和替换节点

名称	描述
removeChild( node)	删除指定的节点
replaceChild( newNode, oldNode)属性attr	用其他的节点替换指定的节点

<script>
var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);
var oldNode=document.getElementById("second");
var newNode=document.createElement("picture");
newNode.setAttribute("src","image/啊侠.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);
</script>

style 属性

语法：HTML元素.style.样式属性＝"值"

<script>
    document.getElementById("titles").style.color="#ff0000";
    document.getElementById("titles").style.fontSize="25px ";
</script>

名称	描述
onclick	当用户单击某个对象时调用事件
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下

className属性

语法：HTML元素.className=“样式名称”

<script>
    function over(){
        document.getElementById("cart").className="cartOver";
        document.getElementById("cartList").className="cartListOver";
    }
    function out(){
        document.getElementById("cart").className="cartOut";
        document.getElementById("cartList").className="cartListOut";
    }
</script>

获取元素的样式

语法：HTML元素.style.样式属性;

HTML中元素属性

属性	描述
offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度

属性应用

标准选择器

document.documentElement.scrollTop;
document.documentElement.scrollLeft;

Chrome

document.body.scrollTop;
document.body.scrollLeft;

var sTop=document.documentElement.scrollTop||document.body.scrollTop;

来源：CSDN

作者：啊侠

链接：https://blog.csdn.net/weixin_44821160/article/details/93508866