JavaScript DOM 操作

最新推荐文章于 2022-10-06 15:24:15 发布

潇洒（sa）一点

最新推荐文章于 2022-10-06 15:24:15 发布

阅读量836

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_60281421/article/details/123538024

版权

JavaScript DOM 操作

DOM操作分类

使用javaScript操作DOM时分为三个方面，DOM core（DOM核心操作），HTML-DOM和CSS-DOM.通过这些标准，开发者可以动态的增加，删除，修改数据，使交互更加便捷，可以使网页真正的动起来。

节点信息：

每个节点都拥有包含节点某些的属性：

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

重要的节点类型：

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

访问节点：

通过getElement系列方法访问指定节点

》getElementById() 方法：返回按属性查找的第一个对象引用。

》getElementByName() 方法：返回指定名称

》getElementByTagName() 方法：返回指定标签名查找的对象集合。

5．通过节点的层次关系访问节点

属性类型	描述
parentNode	返回当前节点的父节点
childNodes	返回子节点集合
firstChild	返回节点的第一个子节点，通常访问文本节点
Last Child	返回节点的最后一个子节点
nextSibling	返回下一个节点
previousSibling	返回上一个节点

6element通用属性

属性类型	描述
FirstElementChild	返回节点的第一个子节点，通常用于访问文本节点
LastElementChild	返回节点的最后一个子节点
NextElementSibling	返回指定节点的下一个兄弟节点
PreviousElementSibling	返回指定节点的上一个兄弟节点

7.style属性设置样式

语法：HTML 元素.style.样式属性=”值”；

例：在页面中有一个id为main的div，要改变div中的字体颜色为红色，字体大小为13px，代码如下：

Document.getElementById(“main”).style.color=”#ff0000”;

Document.getElementById(“main”).style.fontSize=”25px”;

8.在javaScript中常用的事件：

名称	描述
Onclick	鼠标单击某个对象
Onmouseover	鼠标指针被移到某个元素之上
Onmouseout	鼠标指针从某个元素上离开
Onmousedown	某个鼠标按键被按下
Onmouseup	某个鼠标按键被松开

9.Class Name 属性设置样式

HTML 元素.ClassName=”样式名称”；

10.获取元素样式。

HTML 元素.style.样式属性；（x）

Alter(Document.getElementById（”creatList”）.style.display) ---什么也不显示;

DOM提供了一个getComputedStyle()方法，這个方法有两个参数，语法如下：

Document.defaultView.getComputedStyle(元素，null).属性；

Var carList=Document.getElementById（”creatList”）.style.display;

Alter(document.defaultView.getComputedStyle(cartList,null).display);

11.currentStyle

HTML 元素.currentStyle.样式属性；

DOM应用

创建节点：

1	createElement(标签名) ：创建一个指定名称的元素。

例：var tag=document.createElement(“input")
tag.setAttribute('type','text');

添加节点：

追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode)

把增加的节点放到某个节点的前边

somenode.insertBefore(newnode,某个节点);

删除节点：

1	removeChild()：获得要删除的元素，通过父元素调用删除

替换节点：

1	somenode.replaceChild(newnode, 某个节点);

节点属性操作：

1、获取文本节点的值：innerText innerHTML

2、attribute操作

elementNode.setAttribute(name,value)

elementNode.getAttribute(属性名) <--->elementNode.属性名(DHTML)

elementNode.removeAttribute(“属性名”);

3、value获取当前选中的value值
       1.input
       2.select （selectedIndex）
       3.textarea
4、innerHTML 给节点添加html代码：
       该方法不是w3c的标准，但是主流浏览器支持
       tag.innerHTML = “<p>要显示内容</p>”;