DOM编程

来源：互联网发布：fps帧数显示软件编辑：程序博客网时间：2024/05/29 10:31

一、获取dom的三种方式
index.html文件

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body>    <input type="text" id="mytext" >    <form action="" id="myinput">        <input type="text" >        <input type="text" name="mytext" >        <input type="text" name="mytext" >        <input type="text" >        <textarea rows="2" cols="3"></textarea>    </form>    <div name="mytext" style="width: 20px; height: 30px;background: red;"></div><script type="text/javascript" src="index.js"></script></body></html>

index.js文件（获取dom的三种方式）

//1.根据id拿到相应的元素：通过document.getElementById()  特点：拿到的是唯一的一个元素//var elementById=document.getElementById("mytext");console.debug(elementById);/** *  2.根据标签拿到相应的元素 *      特点：标签不是是唯一的，可以获取到多个元素 *      Element.getElementsByTagName(标签名)：拿到这个元素中相应的标签 *      Element.getElementsByTagName(*)： 拿到这个元素中所有标签 * */var inputs = document.getElementsByTagName("input");console.debug(inputs);/** * 3. 根据名称拿到相应的元素 *      特点:可以获取到多个元素  只要名称相同可以拿到不同标签元素 * */var mytext = document.getElementsByName("mytext");console.debug(mytext);/** *  获取form标签中的四个input元素 * */var  myinput = document.getElementById("myinput");console.debug(myinput);//根据标签拿到相应的元素//var inputs = myinput.getElementsByTagName("input");var inputs = myinput.getElementsByTagName("*");console.debug(inputs);

拿到根节点
index.html文件

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">    body{        margin: 0px;        padding: 0px;    }</style></head><body><script type="text/javascript" src="index.js"></script></body></html>

index.js文件

/** *  拿到document文档根节点 *      document.documentElement  -> html标签        可返回存在于 XML 以及 HTML 文档中的文档根节点        document.body  ->body标签    我们要注意的区别:        document.documentElement.clientHeight:它拿到的是整个窗口高度        document.body.clientHeight:拿到内容的高度 *   *///拿到body标签var body = document.body;console.debug(body);console.debug(body.clientWidth);console.debug(body.clientHeight);//高度是根据页面内容的高度决定//拿到HTML标签var htmlEle = document.documentElement;console.debug(htmlEle);console.debug(htmlEle.clientWidth);console.debug(htmlEle.clientHeight);//页面上可以看到的高度

Node接口的属性与方法
index.html文件：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body>    <input type="text" id="mytext">        <ul id="westRun">            <li>唐唐</li>            <li>沙沙</li><li id="kong" value="zhi">空空</li>            <li>白白</li>        </ul><script type="text/javascript" src="index.js"></script></body></html>

index.js文件

//拿到空空这个节点li，然后再通过这个节点拿到它的父节点ul（westRun）var kong = document.getElementById("kong");var parentNode = kong.parentNode;console.debug(parentNode);/** *  拿到父节点，再去拿它的第一个节点 *      注意：空格换行也算一个元素 **/var westRun = document.getElementById("westRun");var firstChild = westRun.firstChild;console.debug(firstChild);//拿到的是换行//拿到列表列表中的最后一个节点 var lastChild = westRun.lastChild;console.debug(lastChild);/** *  拿到父节点，再去拿它所有子节点的列表 *      注意：空格换行也算一个元素 **/var westRun = document.getElementById("westRun");var childNodes = westRun.childNodes;console.debug(childNodes);/** *  previousSibling：上一个兄弟节点 */var kong = document.getElementById("kong");var previousSibling = kong.previousSibling;console.debug(previousSibling);/** *  nextSibling 下一个兄弟节点 */var kong = document.getElementById("kong");var nextSibling = kong.nextSibling;console.debug(nextSibling);

节点信息
index.html文件

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body>    <input type="text" id="mytext">        <ul id="westRun">            <li>唐唐</li>            <li>沙沙</li><li id="kong" value="zhi">空空</li>            <li>白白</li>        </ul><script type="text/javascript" src="index.js"></script></body></html>

index.js文件

/** * nodeName 节点名称 * nodeValue    节点值 * nodeType 节点类型    * 1——代表Element(元素)li 2——代表Attribute(属性的值)id 3——代表Text(文本) * *//*var kong = document.getElementById("kong");console.debug("Element:nodeName:",kong.nodeName);  //LI :标签名console.debug("Element:nodeType:",kong.nodeType);  //1 : 代表是一个Elementconsole.debug("Element:nodeValue:",kong.nodeValue);//null :Element是没有值的var attr = kong.getAttributeNode("id");console.debug("Attr:nodeName:",attr.nodeName);//id :属性名称console.debug("Attr:nodeType:",attr.nodeType);//2 代表是一个Attrconsole.debug("Attr:nodeValue:",attr.nodeValue);//kong:属性的值var westRun = document.getElementById("westRun");var text = westRun.firstChild;console.debug("Text:nodeName:",text.nodeName);  // #textconsole.debug("Text:nodeType:",text.nodeType);  // 3console.debug("Text:nodeValue:",text.nodeValue);//文本的内容*/var westRun = document.getElementById("westRun");var childNodes = westRun.childNodes;//for(var key in childNodes){//  console.debug(childNodes[key]);//空行也拿到了，只想那四个li//}for(var i=0;i<childNodes.length;i++){//只拿标签    var child = childNodes[i];    if(child.nodeType == 1){        console.debug(childNodes[i]);    }}

操作元素的方法
index.html文件

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body>    <input type="text" id="newPerson"><br>    <input type="button" value="点点点" onclick="changeEle()">        <ul id="westRun">            <li>唐唐</li>            <li>沙沙</li><li id="kong" value="zhi">六二</li>            <li>白白</li>            <li id="mei">美女</li>        </ul>        <li id="bai">白龙马</li><script type="text/javascript" src="index.js"></script></body></html>

index.js文件

//直接从内存中创建追加到页面上   添加元素 appendChild(node)/*function changeEle(){    var westRun = document.getElementById("westRun");    //创建一个li元素    var li = document.createElement("li");    //在标签中添加值    li.innerHTML = "白龙马";    //把创建的元素添加到westRun中    westRun.appendChild(li);}*//*//拿到页面上的某一个标签，放到另外一个位置        添加元素 appendChild(node)function changeEle(){    var westRun = document.getElementById("westRun");    //从页面中拿到相应的li    var li = document.getElementById("bai")    //把创建的元素添加到westRun中    westRun.appendChild(li);}*//*//修改元素replaceChild(newChild, oldChild)（需要他们的父节点才可以修改）function changeEle(){    var westRun = document.getElementById("westRun");    //拿到需要修改的元素——原来的    var kong = document.getElementById("kong");    //创建一个新的元素    var newKong = document.createElement("li");    newKong.innerHTML = "空空";    //把原来的替换成新建的    westRun.replaceChild(newKong, kong);}*//*//在一个元素前面插入一个新的元素  insertBefore(newChild, refChild)function changeEle(){    var westRun = document.getElementById("westRun");    //拿到旧的元素，用来确定在此元素前面 添加新元素    var kong = document.getElementById("kong");    //创建一个新的元素(标签)    var newEle = document.createElement("li");    //为新元素添加值    newEle.innerHTML = "美女";    //把新的元素添加到旧元素的前面    westRun.insertBefore(newEle, kong);}*//*//删除元素  function changeEle(){    var westRun = document.getElementById("westRun");//拿到父节点    //拿到想要删除的元素    var mei = document.getElementById("mei");    //通过父节点删除元素    westRun.removeChild(mei);}*///需求：页面中有一个文本框用户输入值后点击按钮添加到列表中function changeEle(){    //1.拿到父节点    var westRun = document.getElementById("westRun");    //2.拿到文本框中的值    var personName = document.getElementById("newPerson").value;    //3.创建一个元素，把文本框中获取的值放到这个元素里面    var newPerson = document.createElement("li");    newPerson.innerHTML = personName;    //4.把这个元素放到westRun元素里面    westRun.appendChild(newPerson);}

阅读全文

1 0