javascript原生dom操作

最新推荐文章于 2022-11-23 14:27:08 发布

FlyingZCC

最新推荐文章于 2022-11-23 14:27:08 发布

阅读量441

点赞数

分类专栏： JavaScript 文章标签： javascript DOM

本文链接：https://blog.csdn.net/kaishizhangcheng/article/details/73197675

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.

		//1.nodeName和nodeValue
		var cityNode = document.getElementById("city");
		console.log(cityNode.nodeType = Node.ELEMENT_NODE);
		cityNode.hasChildNodes(); //是否有孩子节点
		cityNode.childNodes;
		var firstChildLi = cityNode.childNodes[0];
		cityNode.childNodes.item(0);
		cityNode.childNodes.length;

		firstChildLi.parentNode;
		firstChildLi.nextSibling;
		firstChildLi.previousSibling;
		//将domList转换为Array.在ie8及其之前无效
		Array.prototype.slice.call(cityNode.childNodes, 0);

		//创建元素节点
		var newNode = document.createElement("li");
		//创建属性节点
		var attrNode = newNode.setAttribute("name", "NanJing");
		//创建文本节点
		var txtNode = document.createTextNode("南京");
		newNode.appendChild(txtNode);
		//添加到孩子节点末尾
		cityNode.appendChild(newNode);
		//添加到孩子节点中某个节点之前
		cityNode.insertBefore(newNode, firstChildLi);
		//替换某个子节点
		//cityNode.replaceNode(new,old);
		//移除某个子节点
		//cityNode.removeNode(oldNode);

		//cloneNode()克隆某个节点,true表示 深复制 复制节点和子树
		var cloneCity = cityNode.cloneNode(true);
		//取得会<body>的引用
		document.body.appendChild(cloneCity);
		//获取对<html>的引用
		var htmlDoc = document.documentElement;

		document.URL; //"http://127.0.0.1:8020/MyJS/T09DOM.html"
		document.domain; //"127.0.0.1"
		document.referrer; //连接到当前页面的 那个页面的 url

		document.forms;
		//document.forms[0].submit();//提交表单
		//document.forms["form2"];
		document.images;

		cityNode.setAttribute("name", "city");
		cityNode.getAttribute("name");

		//操作表格
		var table=document.createElement("table");
		table.border=1;
		table.width="100%";
		
		//创建tbody
		var tbody=document.createElement("tbody");
		table.appendChild(tbody);
		
		//创建一行
		tbody.insertRow(0);
		tbody.rows[0].insertCell(0);
		tbody.rows[0].cells[0].appendChild(document.createTextNode("cell-1-1"));
		
		tbody.rows[0].insertCell(1);
		tbody.rows[0].cells[1].appendChild(document.createTextNode("cell-1-2"));
		
		document.body.appendChild(table);
		
		//Selectors API
		//querySelector():接收一个css选择符,返回匹配的第一个元素.找不到返回null,传入不支持的选择符抛异常.
		//使用document.调用则在整个dom查询,使用element.调用则在后代元素内查询
		//querySelectorAll():返回所有匹配的元素列表NodeList
		var doc=document;
		doc.querySelector("body");
		doc.querySelector("#myDiv");
		doc.querySelector(".selected");

二.form与select

		var form=document.forms["form1"];
		//form.submit();
		form.reset();
		form.elements[0];
		var field=form.elements["username"];
		field.disabled=true;
		field.focus();
		
		var select=form.elements["se"];
		//add(newOption,beforeOption):在相关项之前插入option
		//select.add();
		select.options;//所有<option>
		//select.remove(0);//移除option
		select.selectedIndex;//选中的索引,从0开始
		//select框的type属性 为select-one或select-multiple,取决于multiple属性
		var opt1=select.options[0];
		opt1.getAttribute("value");
		opt1.value;
		opt1.text;
		
		select.οnchange=function(){
			//访问选中项
			var selectedOpt=select.options[select.selectedIndex];
			alert(selectedOpt.text+selectedOpt.value);
			addNewOpt(select);
		}
		
		var addNewOpt=function(selectbox){
			var newOpt=document.createElement("option");
			newOpt.appendChild(document.createTextNode("OptionText"));
			newOpt.setAttribute("value","optval1");
			selectbox.appendChild(newOpt);
		}

收工!

FlyingZCC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript原生dom操作

一. //1.nodeName和nodeValue var cityNode = document.getElementById("city"); console.log(cityNode.nodeType = Node.ELEMENT_NODE); cityNode.hasChildNodes(); //是否有孩子节点 cityNode.childNodes; var
复制链接

扫一扫