html dom常用对象

最新推荐文章于 2024-07-30 22:36:34 发布

qq_44801336

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量242

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_44801336/article/details/104450787

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

image select/option table form

image的用法

 <script>
        // 获取 id为 img 的元素
        var img = document.getElementById('img');
        // 创建 Image对象
        var imgObj = new Image();
        // 为 src 属性赋值
        imgObj.src = "img/demo.jpg";
        // 将 Image对象插入到 img元素中
        img.appendChild(imgObj);
 </script>
 但是由于图片加载慢于html代码速度，需要获取width 和 height 属性需要等到图片加载完毕后才行。获取width 和 height 属性前要用 Image对象中的 onload事件。

select/option

Select对象集合(options返回包含下拉列表的所以选项的一个数组)
disabled 设置或返回是否应禁用下拉列表。
form	 返回对包含下拉列表的表单的引用。
selectedIndex 设置或返回下拉列表中被选项目的索引号。(这个用到多)
type 返回下拉列表的表单类型。
name 设置或返回下拉列表的名称。
length	返回下拉列表中的选项数目。
type   返回下拉列表的表单类型

Select 对象方法
add() 向下拉列表添加一个选项。
remove()	从下拉列表中删除一个选项。

以下是实现二级联动

</head>
<body>
	<select name="provs">
		<option>—请选择—</option><!--0-->
		<option>北京市</option><!--1-->
		<option>天津市</option>
		<option>河北省</option>
	</select>
	
	<select name="cities" class="hide">
	</select>
  <script>
	/*实现“省”和“市”的级联下拉列表*/
	var cities=[
      [{"name":'东城区',"value":101},
       {"name":'西城区',"value":102},
       {"name":'海淀区',"value":103},
       {"name":'朝阳区',"value":104}],
      [{"name":'河东区',"value":201},
       {"name":'河西区',"value":202},
       {"name":'南开区',"value":303}],
      [{"name":'石家庄市',"value":301},
       {"name":'廊坊市',"value":302},
       {"name":'保定市',"value":303},
       {"name":'唐山市',"value":304},
       {"name":'秦皇岛市',"value":304}]
	];
</script>
<script src="js/7.js"></script>
</body>
</html>

简化后的代码

//1.查找触发事件的元素
let option = document.getElementsByName("provs")[0];
//2.绑定事件
//当选中的项改变自动执行
option.onchange=function(){
	let option = this;
	let i = option.selectedIndex;
//3.查找要修改的元素
	let selci = document.getElementsByName("cities")[0];
	selci.innerHTML="";
	if(i>0){
//4.修改元素
	let cts = cities[i-1];	
	//创建一个文本碎片
	let frag = document.createDocumentFragment();
	let option = document.createElement("option");
	frag.appendChild(new Option("-请选择-"));
	for(let city of cts){
		//每遍历一个城市,就创建一个option,并加入frag中
		let option = document.createElement("option");
		//将当前城市对象的name放入option
		frag.appendChild(new Option(city.name));
	}
	//每次添加新option之前,先清除旧的内容
	selci.className="";
	selci.appendChild(frag)
	}else{
		//否则就隐藏
		selci.className="hide";
	}
}

Table

*添加行: let tr = 行分组.insertRow(下标)
固定用法:
1. let tr = thead.insertRow(0); //开头插入
2. let tr = thead.insertRow(); //末尾插入区别是动态插入实现倒序和顺序
3. 删除行，可以用table.deleteRow(tr.rowIndex) 其中tr需要自己寻找

//创建table元素,并追加到div#data下
let table = document.createElement("table");

//创建thead元素,并追加到table下
// let thead = document.createElement("thead");
// table.appendChild(thead);

let thead = table.createTHead()
//创建tr元素,并追加到thead下
// let tr = document.createElement("tr");
// thead.appendChild(tr);

let tr = thead.insertRow();
//遍历json数组中第一个对象的每个属性
for(let key in json[0]){
//创建<th>并追加到<tr>下
let th = document.createElement("th");
tr.appendChild(th);
//设置<th>的内容为key
th.innerHTML=key;
}

//创建tbody,并追加到table下
// let tbody = document.createElement("tbody");
// table.appendChild(tbody);
let tbody = table.createTBody();
//遍历json中每个员工对象
for(let emp of json){
	
	//每遍历一个对象就创建一个tr追加到tbody下
	// let tr = document.createElement("tr");
	// tbody.appendChild(tr);
	let tr = tbody.insertRow();
	
	
	//遍历当前员工对象的每个属性
	for(let key in emp){
	//每遍历一个属性就创建一个td并追加到tr下,并设置td的内容为当前属性的值
		// let td = document.createElement("td");
		// tr.appendChild(td);
		// td.innerHTML=emp[key];
		
		tr.insertCell().innerHTML=emp[key];
	}
	//创建一个新的td
	
	// let td = document.createElement("td");
	//将新的td追加到tr
	// tr.appendChild(td);
	// td.innerHTML=`<button>X</button>`;
	let td = tr.insertCell();
	td.innerHTML = `<button>X</button>`;
	
	td.children[0].onclick=function(){
		//获得当前按钮的行
		let btn = this;
		btn.style.background="yellow";
		//获得当前按钮所在的行  td tr
		let tr = btn.parentNode.parentNode;
		let ename = tr.cells[0];
		if(confirm(`确定删除${ename.innerHTML}吗?`)){
		//删除当前按钮所在的行
		table.deleteRow(tr.rowIndex);
		}
	}
}
tr.insertCell().innerHTML="删除";
//最后,再将整个table一次性追加到div#data下
document.getElementById("data").appendChild(table);

form

获取表单的知道内容
form.elements[i/id/name]
方法：
elem.focus() 让当前表单元素获得焦点
elem.blur() 让当前表单元素失去焦点

//保存按钮不会自动提交,找到保存按钮,并绑定单击事件  (找到倒数第二个)
form.elements[form.length-2].onclick=function(){
	//如果验证不通过重新获得焦点	
	if(vali(txtName,/^\w{1,10}$/)==false){
		txtName.onfocus();
	}else if(vali(txtPwd,/^\d{6}$/)==false){		
		txtPwd.onfocus();
	}else{
		//否则提交
		form.submit();
	}
}

qq_44801336

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html dom常用对象

image select/option table form*image的用法* <script> // 获取 id为 img 的元素 var img = document.getElementById('img'); // 创建 Image对象 var imgObj = new Image(); //...
复制链接

扫一扫

专栏目录