javascript原生dom操作

来源：互联网发布：ccdd数据库编辑：程序博客网时间：2024/05/14 17:27

一.

//1.nodeName和nodeValuevar 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; //连接到当前页面的 那个页面的 urldocument.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%";//创建tbodyvar 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():返回所有匹配的元素列表NodeListvar 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);//移除optionselect.selectedIndex;//选中的索引,从0开始//select框的type属性 为select-one或select-multiple,取决于multiple属性var opt1=select.options[0];opt1.getAttribute("value");opt1.value;opt1.text;select.onchange=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);}

收工!

阅读全文

0 0