web APIs(1)

最新推荐文章于 2024-07-25 09:24:40 发布

_NULLo

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量49

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_73992162/article/details/130795738

版权

一、Web API基本认识

1.const优先

（1）const语义化更好
（2）很多变量在声明时就知道他不会改变了，用const
（3）实际开发中，比如react框架，基本const
数组和对象即使需要改变也可用const声明变量

2.DOM

API作用：使用JS操作HTML和浏览器

分类：DOM（文档对象模型)、BOM（浏览器对象模型）

（1）什么是DOM?

DOM (文档对象模型)
DOM是W3C(万维网联盟)的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
对网页进行增删改查的操作。
作用：
开发网页内容特效和用户实现交互

DOM树

将HTML文档以树状结构直观地表现出来，我们称之为文档树或DOM树
描述网页内容关系的名词
作用：直观体现标签与标签之间的关系

DOM对象

DOM对象：浏览器根据HTML标签生成的JS对象
所有标签属性都可以在这个对象上找到
修改这个对象的属性会自动映射到标签身上

核心：把网页内容当作对象来处理

document对象：
- 是DOM里提供的一个对象
- 它提供的属性和方法都是用来访问和操作网页内容的（例：document.write()）
- 网页所有内容都在document里

（2）查找DOM对象

1、按id属性查找

文档从上到下加载，把script写到标签下面
id是大小写敏感的字符串

var elem=document.getElementById("id")

只用于精确查找一个元素
getElementById只能用在document上

实例：

<ul id="myList">
	<li id="m1">首页</li>
	<li id="m2">企业介绍</i>
	<li id="m3">联系我们</i>
</ul>
var ul = document.getElementById('myList') 
console.log(ul);
console.log(typeof myList);//结果为object
console.dir(myList);//打印返回的元素对象，更好的查看里面的属性和方法

返回值：返回一个匹配到ID的DOM Element对象

2、按标签名查找

var elems=element.getElementsByTagName('tag');

不仅查直接子节点，而且查所有子代节点
返回一个动态集合,以伪数组形式储存
即使只找到一个元素，也返回集合；必须用[0],取出唯一元素
实例：

<ul id= "myList">
	<li id="m1">首页</li>
	<li id="m2">企业介绍</li>
	<li id="m3">联系我们</li>
</ul>
var list = document.getElementsByTagName('li'); 
console.log(list);
console.log(list[0]);

3、通过name属性查找

document.getElementsByName(name属性值’)

可以返回DOM树中具有指定name属性值的所有子元素集合

<form id="registerForm">
<input type="checkbox" name="boy"/>
<input type="checkbox" name="boy"/>
<input type="checkbox" name="boy"/>
</form>
var list = document.getElementsByName( 'boy');
console.log( typeof list);

4、通过class查找

var elems=parentgetElemnetsByClassName("class")

查找父元素下指定class属性的元素

实例：

<div id="news">
<pclass="mainTitle">新闻标题1</p >
<pclass="subTitle">新闻标题2</p >
<p class=" mainTitle">新闻标题3</p >
</div>
var div=documentgetElementById('news');
var list =div.getElementsByClassName('mainTitle'); 
console.log(list);

（3）DOM修改

1、读取属性值

第一种 先获得属性节点对象，再获得节点对象的值

var attrNode=elemattributes[下标/属性名];
var attrNode=elemgetAttributeNode(属性名)
attrNodevalue   属性值

第二种 直接获得属性值
var value=elemgetAttribute("属性名")

2、修改属性值

elem.setAttribute("属性名"，value);

实例：找到id为al的元素，修改name属性对应的属性值。

var hl=document.getElementById(“al"); 
hl.setAttributeNode(“name”， zhangji);

3、判断是否包含指定属性

var bool=elem.hasAttribute("属性名")

返回 true 或 false
4、移除属性

elem.removeAttribute("属性名")

实例：删除 id 为 alink 元素的class属性

<a id="alink" class="slink" href=
"javascript:void(0)"onclick="jump(">百度搜索</ a>
var a=documentgetElementById('alink'); 
a.removeAttribute('class');

5、修改样式
内联样式:elem.style.属性名
强调: 属性名:去横线，变驼峰
比如: css: backgroundcolor=>backgroundColor list-style-type=>listStyleType

（4）DOM添加

在DOM中，添加元素有三步：

创建空元素
设置关键属性
将元素添加到DOM树中
1、创建空元素


var elem=document.createElement(“元素名”)
var tr=document.createElement(“tr”)
var td=document.createElement(“td”)

2、设置关键属性

在创建好空元素之后要给空元素设置样式
（1）设置关键属性元素.属性名

注意：element.属性对class属性无效，因为class可能有多个，这个时候用element.setAttribute(“class”,value)；来设置属性，element.getAttribute(“class”)；来访问属性.


a.innerHTML="go to tmooc";
a.herf="http://tmooc.cn";

结果为：


<a href="http://tmooc.cn">go back tmooc</a>

（2）设置关键样式


a.style.opacity="1";//单独设置样式
a.style.cssText="width: 100px;height:100px";//统一设置样式

3、将元素添加在DOM树中
(1) parentNode .appendChild(childNode)


var div=document.createElement("div");
var txt=document.createTextNode("版权声明")；

div.appendChild(txt);
document.body.appendChild(div);

(2) parentNode.insertBefore(newChild,pos)
用于在父元素中的指定子节点之前添一个新的子节点：


<body>
	<ul id="menu">
		<li>the first page</li>
		<li>connect with us</li>
	</ul>

	<script type="text/javascript">
		var ul=document.getElementById("menu");
		var newLi=document.createElement("li");
		ul.insertBefore(newLi,ul.lastChild);
	</script>
</body>

由于每次修改DOM树都会展开搜索一遍（layout）这样一来会导致时间空间开销，所以我们尽量在插入之前处理好子节点以达到优化的目的 :

(1)若同时创建父元素和子元素时，在内存中先将子元素添加到父元素节点上，再将父节点插入DOM树中。

（2）若只添加多个同级子元素，我们可以先将所有子元素临时添加到一个虚拟文档片段中（即为临时父节点），然后将文档片段整体添加到页面中:
1、先创建文档片段：


var frag=document.createDocumentFragment（）;

2、将子元素加入frag中：


frag.appendChild(child);

3、将frag插入到DOM中


parent.appendChild(frag);

append之后frag会自动释放，不会占用元素。


//var arr=document.querySelectorAll(".page");
var arr=document.getElementsByClassName("page");//通过css选择器或类名来查找
for(var i=0;i<arr.length;i++)
{
	for(var j=0;j<4;j++)
	{
		for(var k=0;k<4;k++)
		{
			//创建元素
			var divs=document.createElement("div");
			divs.style.cssText="width:100px;height:100px;border:1px solid white;position:absolute;background-image:url(images/"+(i+1)+".png);background-size:400px 400px;box-shadow:0px 0px 50px white";
			
			divs.style.top=j*100+"px";
			divs.style.left=k*100+"px";
				
			divs.style.backgroundPositionX=-k*100+"px";
			divs.style.backgroundPositionY=-j*100+"px";

			arr[i].appendChild(divs);
		}
	}
}

_NULLo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
web APIs(1)

DOM (文档对象模型)DOM是W3C(万维网联盟)的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。对网页进行增删改查的操作。作用：开发网页内容特效和用户实现交互DOM树将HTML文档以树状结构直观地表现出来，我们称之为文档树或DOM树描述网页内容关系的名词作用：直观体现标签与标签之间的关系DOM对象DOM对象：浏览器根据HTML标签生成的JS对象所有标签属性都可以在这个对象上找到修改这个对象的属性会自动映射到标签身上。
复制链接

扫一扫