算法（冒泡法排序）、DOM、节点、选择器、定位

最新推荐文章于 2021-04-15 18:26:08 发布

wyk.wyk

最新推荐文章于 2021-04-15 18:26:08 发布

阅读量280

点赞数

本文链接：https://blog.csdn.net/weixin_45343973/article/details/101020947

版权

一、算法(冒泡法排序)

// 冒泡法排序-升序
var data=[15,3,0,9,27,6,44,19,1,30];
var i,j,temp;
for(i=0;i<data.length-1;i++){
	for(j=i+1;j<=data.length-1;j++){
		if(data[i]>data[j]){
			temp=data[i];
			data[i]=data[j];
			data[j]=temp;
		}
	}
}
document.write(data);

二、DOM（Document Object Model文档对象模型）

为了能让JavaScript语言能够操作HTML文档中的对象，设计了一套命令来实现对象HTML对象操作，这一整套命令被称为“DOM”
D文档指的是HTML文档；O对象指的是HTML文档中的标记
在DOM中，HTML文档中的标记被称为“节点”（node）

三、节点的分类

1、元素节点：（element）HTML中的标记对就是元素节点
2、属性节点：（attribute）HTML标记中的属性就是属性节点。
3、文本节点：（text）标记对中的文本内容就是文本节点。

四、查找元素节点：

1、document.querySelector()：根据选择器查找元素节点，查找到满足选择器的第一个节点。

document.querySelector(“h1”);  // 从HTML文档中找h1标记。
document.querySelector(“#hhh”); //  从HMTL文档中找id属性取值为hhh的元素 节点
document.querySelector(“.dl”);  // 从HTML文档中找class属性取值为dl的元素节点

2、document.querySelectorAll()：根据选择器查找元素节点，查找到满足选择器的所有节点。

var s=document.querySelectorAll("li");   //所有的li元素节点
console.log(s.length);     //输出所有的li元素节点的个数
for(var i=0;i<s.length;i++){
console.log(s[i]);     //在控制台输出节点
}

3、 document.getElementById()，根据id属性的取值获得元素节点。
例：寻找id属性取值为hhh的元素节点。

方法1：var x=document.getElementById(“hhh”);
方法2：var y=document.querySelector(“#hhh”);

4、document.getElementsByClassName()，根据class属性的而去之获得元素节点们。
例：寻找class属性取值为aaa的元素节点。

方法1：var x=document.getElementsByClassName(“aaa”);
方法2：var y=document.querySelectorAll(“.aaa”);

5、 document.getElementsByTagName()，根据标记对的名称获得元素节点们。
例：寻找a标记的元素节点。

var x=document.getElementsByTagName(“a”);
console.log(x[0]);

6、 document.getElementsByName()，根据name属性的取值获得元素节点们。
例：寻找name属性取值为pwd的密码框。

var x=document.getElementsByName(“pwd”);
console.log(x[0]);

注意：
1、利用document引出的上述方法可以在整个文档范围内进行查找。
2、利用元素节点引出的上述方法只能在这个元素节点的内部进行查找。

五、查找元素节点：DOM0级

查找元素节点除了以上的六个方法以外，还有一些属性可以实现。
（1）document.all：查找DOM结构中所有的元素节点。
可以通过数据元素的方式来获取任意一个元素节点。
例如：var x=document.all[0]; //x表示<html>元素节点
（2）document.links：查找DOM结构中所有的a元素节点。

 例： var y=document.links;
      console.log(y[0]);    //页面中第一个a标签

（3）document.images：查找DOM结构中所有的img元素节点。

 例：var i=document.images;
   	 console.log(i[0]);   //页面中第一个img标签

（4）document.forms：查找DOM结构中所有的form元素节点。

 例：var y=document.forms;
     console.log(y[0]);  //页面中第一个form标签

六、元素节点的可编辑性：

1、contentEditable：设置元素节点是否可以编辑。
contentEditable=true，表示元素节点可编辑。
contentEditable=false，表示元素节点不可编辑。

2、isContentEditable：返回元素节点是否处于可编辑状态。
isContentEditable=true，表示元素节点处于可编辑状态。
isContentEditable=false，表示元素节点处于不可编辑状态。

七、元素节点的tagName属性：

1、功能：返回元素节点的大写形式的标记名称。
2、在事件中可以通过下列代码得到触发事件的元素节点。

 event.target.tagName.toLowerCase()

八、元素节点的className属性：

1、功能：返回/设置元素节点的类名。
2、若元素节点没有class属性，则className属性将返回空串。
若元素节点有class属性，则className属性将返回元素节点class属性的取值。
3、例1：为一个没有class属性取值的<h1></h1>标记对设置类名。

var h1Node=document.querySelector(“h1”);
h1Node.className=“yes”;
console.log(h1Node);

九、元素节点的HTML属性：

1、HTML文档中标记的属性可以直接用在脚本当中。
2、功能：返回/设置元素节点在HTML文档中的属性值。
3、允许为元素节点添加自定义HTML属性，但是添加的自定义属性无法在元素中显示出来。
例2：为一个<div></div>标记添加一个abc的属性。

var boxNode=document.getElementById(“box”);
boxNode.abc=“Hello”;
console.log(boxNode.abc);    // Hello

案例：制作一个表格，在表格每一行的末尾添加一个“编辑”和“删除”按钮。完成编辑和
删除功能。

<table id="box">
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>电话</th>
			<th>住址</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>康××</td>
			<td>女</td>
			<td>20</td>
			<td>155</td>
			<td>平山</td>
			<td><button class="abc">编辑</button> <button class="del">删除</button></td>
		</tr>
		<tr>
			<td>何××</td>
			<td>男</td>
			<td>20</td>
			<td>155</td>
			<td>邢台</td>
			<td><button class="abc">编辑</button><button class="del">删除</button></td>
		</tr>
		<tr>
			<td>底××</td>
			<td>女</td>
			<td>21</td>
			<td>155</td>
			<td>地球</td>
			<td><button class="abc">编辑</button><button class="del">删除</button></td>
		</tr>
		<tr>
			<td>康×</td>
			<td>女</td>
			<td>20</td>
			<td>155</td>
			<td>平山</td>
			<td><button class="abc">编辑</button><button class="del">删除</button></td>
		</tr>
	</table>

*{
	margin:0;
	padding: 0;
}
table{
	width: 700px;
	height: 200px;
	border:1px solid gray;
	margin:0 auto;
}
table th,
table td{
	border:1px solid #cccccc;
}
table td{
	text-align: center;
}

// 给父元素绑定单击事件
box.onclick=function(){
	// 如果真正触发事件的对象是abc按钮
	if(event.target.className=="abc"){
		trNode=event.target.parentElement.parentElement;
		tdNodes=trNode.querySelectorAll("td");

		// 如果真正触发事件的对象的文本内容是编辑
		if(event.target.textContent=="编辑"){

			for(var i=0;i<tdNodes.length-1;i++){

				// 真正触发事件对象的一行td变成可编辑
				tdNodes[i].contentEditable=true;
			}
			tdNodes[0].style.backgroundColor="#cccccc";
			tdNodes[0].focus();
			event.target.textContent="保存";
		}else{
			for(var i=0;i<tdNodes.length-1;i++){
				tdNodes[i].contentEditable=false;
			}
			tdNodes[0].style.backgroundColor="";
			event.target.textContent="编辑";
		}


	}
	// 如果真正触发事件的对象是del
	if(event.target.className=="del"){
		var x=window.confirm("您确定删除吗？");
		if(x){
			var tbodyNode=document.querySelector("tbody");
			var trNode=event.target.parentElement.parentElement;
			tbodyNode.removeChild(trNode);
		}
	}
}

十、实例：

在页面中有两个文本框，用来输入两个整数，单击按钮计算两个整数的和并利用alert()显示出结果。
1、如何获取文本框的内容：
A .为文本框设置name属性。
B .利用document.forms[0].文本框的name属性取值可以得到文本框
C .利用value属性可以得到文本框的内容
例：文本框的name属性取值为data1：<input type=”text” name=”data1” />

var x=document.forms[0].data1.value;    //得到name属性为data1的文本框的内容

2、注意：从文本框中获得的数据默认情况下都是字符型。
3、本例的代码如下所示：

 <input type=”button” value=”计算和” onclick=”sum()” />
    function sum(){
      var x=document.forms[0].data1.value;
      var y=document.forms[0].data2.value;
      var r=parseInt(x) + parseInt(y);
      window.alert(r);
}

十一、总结选择器（selector）：

基本选择器：
*，通配符选择，选择出HTML中所有的标签。
#id，ID选择器，选择出id属性取值为指定值得标签。（#box）
.class，类选择器，选择出class属性取值为指定值得标签。（.ok）
element，元素选择器，选择出指定的标签。（table）
层次选择器：
div>p，子选择器。<div><p></p></div>
div p，后代选择器。<div><ul><p></p></ul></div>
div+p，相邻选择器。下面的、紧邻的、同级的<div></div><p></p>
div~p，兄弟选择器。下面的、全部的、同级的<div></div><h1></h1><p></p>
伪类选择器：必须以:开头
伪元素选择器：必须以::开头。