浅谈一下javaScript中的dom

1.基本概念:
DOM :DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件
把XML/HTML中的所有成员描述成一个个对象(Node:Document,Element,Attri,Text). 一切皆节点
D:文档 – html 文档 或 xml 文档
O:对象 – document 对象的属性和方法
M:模型
DOM 是针对xml(html)的基于树的API。
DOM树:节点(node)的层次。
DOM 把一个文档表示为一棵家谱树(父,子,兄弟)
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
在这里插入图片描述
2.获取元素的三种方式:
①//getElementById() 返回对拥有指定 id 的第一个对象的引用。
var div = document.getElementById(“divId”);
print(div);
print(div.innerHTML);
②//getElementsByName() 返回带有指定名称的对象集合。
var favs =document.getElementsByName(“favs”);
print(favs);
③//getElementsByTagName() 返回带有指定标签名的对象集合。
var divs = document.getElementsByTagName(“div”);
print(divs);
3.Node对象的属性和方法
在这里插入图片描述
4.属性的注意点:
1.元素上的原始属性和自定义属性的获取值和设置值
操作元素的原始属性:
获取属性值:
元素对象.属性名;
元素对象[“属性名”];
设置属性值:
元素对象.属性名=值;
元素对象[“属性名”]=值;
操作元素自定义属性:
获取属性值:
元素对象.getAttribute(“属性名”);
设置属性值:
元素对象.setAttribute(“属性名”,值);
特殊情况:
2.操作属性名和默认属性值相同的属性. 如:checked,selected,属性值是true/false.
3.操作class属性.–>在DOM中属性名为:className
4.操作style的属性.如:background-color—>backgroundColor
5.操作readonly属性:readonly—>readOnly

5.插入/追加/删除/替换节点
在这里插入图片描述

发布了52 篇原创文章 · 获赞 2 · 访问量 236

猜你喜欢

转载自blog.csdn.net/weixin_41588751/article/details/103866139
今日推荐