[JavaScript]DOMAPI

最新推荐文章于 2024-04-11 19:58:23 发布

程序员云锦

最新推荐文章于 2024-04-11 19:58:23 发布

阅读量1k

点赞数 51

分类专栏：前端开发知识总结文章标签： javascript 前端 html dom操作

本文链接：https://blog.csdn.net/m0_61607810/article/details/122015648

版权

前端开发知识总结专栏收录该内容

12 篇文章 7 订阅

订阅专栏

文章目录

获取DOM节点对象

var oHeader = document.getElementById("header");
表示直接获取ID名称为header的标签，返回对应的节点对象(单个）,如果有多个ID名为header的标签，也只获取第一个标签

var aP = document.getElementdByTagName("p");
表示获取文档中的所有p标签，返回一个DOM集合，类型为NodeList类数组对象，如果只找到了一个p标签返回的也是类数组集合

var aDes = document.getElementsByClassName("des");
获取所有类名为des的标签，返回一个DOM集合，类型也为NodeList类数组对象，只找到一个也返回类数组集合，这个方法是在IE9以上版本的浏览器中才新加入的。

H5新增的方法：
var oHeader = document.querySelector("#header");
参数中填写的格式是CSS选择器的规范，也就是跟CSS的选择器写法一模一样，除了伪元素不可以（因为伪元素并不是一个实体标签）

var aDes = document.querySelectorAll(".des");
同样是填CSS选择器，这个方法与上面的区别就是querySelectorAll可以获取到多个标签，并且返回的都是类数组对象，哪怕只获取到一个标签对象也是。而querySelector是获取一个单个的标签对象，返回的也是单个的对象，就算有多个符合条件的标签对象，也只会获取到第一个。

获取的DOM元素命名格式

一般来说我们在具体的标签名前加上一个小前缀来规范化命名方式，有两种前缀，分别是字母o和字母a

字母o前缀

表示英文单词only，适用于获取单一节点对象元素命名，一般用于querySelector，getElementById方法
示例：

<body>
	<div id="wrap">
		<ul id="list">
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
<script>
	var oWrap = querySelector("#wrap");
	var oList = getElementById("list");
</script>

字母a前缀

表示英文单词all的意思，适用于获取多个节点，也就是集合，一般用于getElementsByClassName，getElementsByTagname，querySelectorAll方法
示例：

<body>
	<div id="wrap">
		<ul id="list">
			<li></li>
			<li></li>
		</ul>
		<p class="cont">sgsgdwgdg</p>
		<p class="cont">sgsgdwgdg</p>
		<p class="cont">sgsgdwgdg</p>
		<a class="link">sgdgs</a>
		<a class="link">sgdgs</a>
		<a class="link">sgdgs</a>
	</div>
</body>
<script>
	var aLi = querySelectorAll("#wrap li");
	var aP = getElementsByClassName("cont");
	var aA = getElementsByTagname("a");
</script>

对象属性和标签属性概念的区分

对象属性是指使用js获取到标签对象后，再使用对象.属性得到的值，而标签属性则是获取的我们在标签属性那里原原本本写的东西
我们使用getAttribute方法来演示这个区别，getAttribute方法会将我们在标签属性里写的东西以字符串的形式返回，而如果使用对象.属性的方法，那么得到的就是标签属性的值
注意：
1.如果这里使用的是自定义的标签属性，不是标签自有的属性，那么getAttribute方法仍然能够拿到值，但是以对象.属性方式就无法拿到，值是undefind
2.setAttribute方法，设置标签属性，这里要注意，如果我们以对象.属性的方法来设置一个属性的值，是在这个属性的结果值上进行设置的，而setAttribute方法则是相当于直接在标签上重写的情况。如设置标签的width属性，如果以对象.width = "100px"是不正确的，这样就相当于将width属性的值设置成100px，肯定会报错的，以对象.setAttribute(“width”,“100px”)方法就相当于在标签上将<p width="100px"></p>所以是正确的
示例：

<body>
	<img id="pic" style="outline:none;" class="photo red" src="images/bird.png" width="100px" height="100" alt="bird" title="你猜猜我是什么鸟" my="200">
<script>
	var oImg = document.querySelector("#pic");
	
	console.log(oImg.getAttribute("width");//输出100px
	console.log(oImg.width);//输出100

	console.log(oImg.getAttribute("my");//输出200
	console.log(oImg.my);//输出undefind
	
</script>
</body>

判断某一个属性是否有某属性

我们可以使用hasAttribute()方法来判断节点对象是否有某个属性，这里就算是自定义属性也是可以判断的
示例：

oImg.hasAttribute("width");//返回true
oImg.hasAttribute("height");//返回true
oImg.hasAttribute("zidinyi");//如果没有在标签里写这个属性，则返回false，否则返回true

DOM节点对象的属性

DOM的每个节点对象都有一系列属性，用于存储该节点的状态和信息

element.title 		//设置或返回元素的title属性
element.textContent //设置或返回一个节点和它的文本内容
element.innerText 	//设置或返回一个节点和它的文本内容
<p>p标签</p>
var op = document.querySelector("p");
console.log(op.textContent);
console.log(op.innerText);
//这两个输出的都是p标签中的文字内容

<div id="wrap">
	<h3>标题内容</h3>
	div内容
</div>
var oP = querySelector("#wrap");
//获取元素内的文本内容，但是会过滤掉标签，打印的文本不包括<h3></h3>这样的标签
console.log(oP.textContent);
console,log(oP.innerText);

//获取元素内的所有内容，包括标签
console.log(oP.innerHTML);
//可以获取到oP这个对象内部的标签对象，打印的是<h3>标题内容</h3>

element.tagName 	//作为一个字符串返回某个元素的标记名（大写）
element.className 	//获取标签的class属性值

nodelist.length 	//返回节点列表的节点数目。
nodelist.item(idx) 	//返回某个元素基于文档树的索引 与 nodelist[idx]是相同的作用