DOM编程

最新推荐文章于 2024-05-09 15:31:06 发布

chenmixuexi_

最新推荐文章于 2024-05-09 15:31:06 发布

阅读量268

点赞数 1

文章标签： dom 编程

本文链接：https://blog.csdn.net/chenmixuexi_/article/details/77161647

版权

一、获取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 : 代表是一个Element
console.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 代表是一个Attr
console.debug("Attr:nodeValue:",attr.nodeValue);//kong:属性的值

var westRun = document.getElementById("westRun");
var text = westRun.firstChild;
console.debug("Text:nodeName:",text.nodeName);  // #text
console.debug("Text:nodeType:",text.nodeType);  // 3
console.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);
}

chenmixuexi_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM编程

一、获取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">
复制链接

扫一扫