JS之DOM第二天

JS之DOM第二天

（一）操作元素之修改元素属性

<1>

<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="图片地址" alt="" title="">

//修改元素属性 src
//1、获取元素
var ldh=document.getElementById('ldh');
var zxy=document.getElementById('zxy');
var img=document.querySelector('img');
//2、注册事件
zxy.onclick=function(){
	img.src='images/zxy.jpg';//zxy图片路径
	img.title='张学友思密达'；//zxy title属性
}
ldh.onclick=function(){
	ldh图片路径;
}

<2>

如果进行了DOM操作元素，网页将重新layout。如果频繁的操作DOM，会造成性能浪费。

解决方法：如果需要向父节点中追加多个字节点，可以先将需要添加的子元素先保存在一个虚拟的临时父节点下。最后一次性将所有字节点追加到DOM中真实父节点下！

步骤1：创建多个子节点：var zhy1=document.createElement(“a”);var zhy2=document.createElement(“b”);

步骤2：创建虚拟父节点：var frag=document.createElementFragment();

步骤3：将子节点追加到虚拟父节点：frag.appendChild(zhy1);frag.appendChild(zhy2);

步骤4：最后将虚拟父节点追加到真正的父节点中：parent.appendChild(frag);

注意：将临时节点追加到DOM中，临时的片段frag会被释放，真正追加到DOM的只有那些子元素！

<3>HTML DOM简化操作

在操作常见的HTML元素时，HTML DOM提供了一些简化操作。包括了img，select，option，table/行分组/tr/td，from

1、img：var img=new Image();

2、select：value；selectdIndex；option；length

解析：value：获取被选中的选项的value值；selectedIndex：获取当前被选中的选择的下标；option：获取内部所有的option元素集合；length：获取option所得集合的长度。

3、option：var opt=new Option();

4、table：外层的table管着行分组（thead，tbody，tfoot）；

5、创建行分组：已经获取到table元素，可以直接调用table创建行分组元素

var thead=table.createTHead();

var tbody=table.createTBody();

var tfoot=table.createTFoot();

6、删除行分组：调用table删除内部的行分组，注意只能删表头和表尾。

table.deleteTHead();

table.deleteTFoot();

7、获取表格中的行分组：可以有多个表主体。

table.tHead;

table.tBodies;

table.tFoot;

8、行分组控制行

创建行：行分组　insertRow(i);

删除行：行分组.deleteRow(i);

获取行：行分组.Rows;

9、行分组控制列

创建列：tr.insertCell(i);

删除列：tr.deleteCell(i);

获取列们：tr.Cells;

10、from：获取页面上的from元素：

document.from；获取页面元素中的表单元素

document.forms[i/id]；根据表单的序号，或者id值获取对应表单！

from.elements；获取表单中所有的表单元素！

返回一个类数组对象，具有length和下标！

<4> 案例：分时显示不同图片，显示不同问候语

	img{
	width:300px;
	}

<img src="images/s.gif" alt="">
<div>上午好</div>

//根据系统不同时间来判断,所以需要到日期内置对象
//利用多分支语句来设置不同的图片
//需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性
//需要一个div元素,显示不同问候语,修改元素内容即可
1、获取元素
var img = document.querySelector('img');
var div =document.querySelector('div');
2、得到当前的小时数
var date = new Date();
var h = date.getHours();
3、判断小时数改变图片和文字信息
if (h < 12) {
    img.src ='images/s.gif';
    div.innerHTML=‘亲，上午好，好好写代码’；
    }else if (h< 18){
		img.src ='images/x.gif';
		div.innerHTML='亲，下午好，好好写代码’；
		}	
	else{
		img.src='images/w.gif';
		div.innerHTML='亲，晚上好，好好写代码'；
	}

(二)操作元素之修改表单元素

<button>按钮</button)
<input type="text"value="输入内容">

// 1、获取元素
var btn = document.queryselector('button'); 
var input = document.querySelector('input');
// 2.注册事件 处理程序
btn.onclick = function(){
//input.innerHTML=“点击了’；这个是普通盒子,比如div标签里面的内容
//表单里面的值文字内容是通过value来修改的
input.value='被点击了'；
//如果想要某个表单被禁用 不再点击 disabled 我们想要这个按钮 button禁用
this.disabled=true;
//this 指向的是事件函数的调用者 btn
}

(三)操作元素之修改样式属性

// 1.获取元素
var div = document.querySelector('div');
// 2.注册事件 处理程序
div.onclick function(){
// div.style里面的属性 采取驼峰命名法
this.style.backgroundColor=‘purple';
this.style.width '258pxy';
}

（四）HTML DOM简化操作

在操作常见的HTML元素时，HTML DOM提供了一些简化操作。包括了img，select，option，table/行分组/tr/td，from

1、img：var img=new Image();

2、select：value；selectdIndex；option；length

解析：value：获取被选中的选项的value值；selectedIndex：获取当前被选中的选择的下标；option：获取内部所有的option元素集合；length：获取option所得集合的长度。

3、option：var opt=new Option();

4、table：外层的table管着行分组（thead，tbody，tfoot）；

5、创建行分组：已经获取到table元素，可以直接调用table创建行分组元素

var thead=table.createTHead();

var tbody=table.createTBody();

var tfoot=table.createTFoot();

6、删除行分组：调用table删除内部的行分组，注意只能删表头和表尾。

table.deleteTHead();

table.deleteTFoot();

7、获取表格中的行分组：可以有多个表主体。

table.tHead;

table.tBodies;

table.tFoot;

8、行分组控制行

创建行：行分组　insertRow(i);

删除行：行分组.deleteRow(i);

获取行：行分组.Rows;

9、行分组控制列

创建列：tr.insertCell(i);

删除列：tr.deleteCell(i);

获取列们：tr.Cells;

10、from：获取页面上的from元素：

document.from；获取页面元素中的表单元素

document.forms[i/id]；根据表单的序号，或者id值获取对应表单！

from.elements；获取表单中所有的表单元素！

返回一个类数组对象，具有length和下标！