DOM元素获取与操作指南-优快云博客

本文链接：https://blog.youkuaiyun.com/wy1511861159/article/details/120054701

本文详细介绍了DOM元素的获取方法，包括getElementById、getElementsByTagName、getElementsByClassName等，并讲解了通过节点关系查找元素的方式，如firstChild、lastElementChild等。此外，还涉及通过JS操作属性、创建和操作元素的相关技巧，如动态拼接innerHTML和删除元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一节、DOM元素的获取

1.1、常用的一些获取DOM元素的方法

getElementById(“id值”)

规则：根据元素的id值获取元素，如果多个元素的ID值重复则获取第一个元素。

<script type="text/javascript">
    function testById(){
    /* document -- 文档--代表当前页面文档--代表当前HTML页面
			 */
    var doc =  document.getElementById("p1");
    console.log(doc);
}

getElementsByTagName(“标签名”)

规则：会将整个文档中所有相同的标签名获取出来，封装成nodeList

这个nodeList可以像数组一样操作（下标进行访问）

function testByTagName(){
    var docs =  document.getElementsByTagName("p");
    console.log(docs);
}

getElementsByName(“name值”)

规则：会将整个文档中name属性值相同的元素都获取，封装成nodeList

这个nodeList可以像数组一样操作（下标进行访问）

应用场景：单选按钮或者多选框（原因：一组单选或者多选框，每个元素之间必须有相同的name属性）

getElementsByClassName(“类名”)

规则：会将整个文档中name属性的值形同的元素都获取出来，封装成nodeList

这个nodeList可以像数组一样操作（下标进行访问）

父元素.querySelector(“选择器”)

规则：会将父元素中符号对应选择器的元素找出来,只会找第一个

父元素.querySelectorAll(“选择器”)

规则：会将父元素中符号对应选择器的元素找出来，全部找出来

var doc =  document.querySelectorAll("input[value='2']");//属性选择器
var doc = document.querySelector("#div1>div>p");
var docs =  document.querySelector("#div1 div:nth-child(3)");
var docs =  document.querySelector("#div1 div:last-child");//找div1最后一个儿子，如果是DIV元素则查找成

总结：此处的选择器可以是CSS中任意的选择器

注意：在IE8及其以下是不兼容的

1.2、通过节点与节点之间的关系进行查找元素

通过子关系

常用方法：

父节点.firstchild

作用：找指定父元素的第一个子节点
注意：浏览器在解析HTML文档的时候将所有的元素都解析成节点，包括文档中的空格换行。。。

支持链式调用： parent.firstChild.firstChild

firstElementChild

作用：找指定父元素的第一个子元素

父节点.lastChild

作用：找指定父元素的最后一个子节点

支持链式调用：可以和firstChild混用

lastElementChild

作用：找指定父元素的最后一个子元素

parent.children

作用：只找父节点下的有意义的子节点（排除空格，注释）

parent.childNodes)

作用：会找出父节点下所有的子节点（元素，空格，注释…）

子元素.parentElement

作用：找子元素的父元素

子元素.parentNode

作用：找子元素的父节点

//找到父节点
var parent =  document.getElementById("div1");	
var child = parent.firstChild.firstChild; //注意换行和空格的影响
console.log(child);

var doc = document.getElementById("div1");
console.log(doc);
console.log(doc.parentElement);//元素
console.log(doc.parentNode);//节点

var parent =  document.getElementById("div1")
console.log(parent.children); 
console.log(parent.childNodes);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2RlTu8np-1630547917191)(https://i.loli.net/2021/08/23/G2uYj3bKcRS8nd9.png)]

通过兄弟关系找：

兄弟节点.previousSibling 找前一个兄弟

兄弟节点.nextSibling 找后一个兄弟

注意：

var boy =  document.querySelector("#div1 p:first-child");
console.log(boy.previousSibling);//找前一个兄弟
console.log(boy.nextSibling);//找后一个兄弟
console.log(boy.nextSibling.nextSibling);//找后一个兄弟

第二节：通过JS操作属性

一、获取属性

方式一、元素.属性名

方式二、元素[“属性名”]

方式三、元素.getAttribute(“属性名”)

二、修改属性

方式一、元素.属性名 = 值

方式二、元素.setAttribute(“属性名”，“值”)

应用场景：

获取或者设值input输入框：

var val = document.getElementById("uname").value;
document.getElementById("uname").value = (parseInt(val)+1);//可以操作页面不允许输入的输入框
                                                                                                                                    //disable

获取下拉框：

<h4>请选择城市</h4>
<select name="city" onchange="getselectValue()">
    <option value="-1">===请选择===</option>
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">重庆</option>
</select>

function getselectValue(){
    var val = document.getElementsByName("city")[0].value;
    console.log(val);
}		
}

获取多选框：

function getchekboxValue(){
    var hobbys =  document.getElementsByName("hobby");
    for(var i = 0;i<hobbys.length;i++){//遍历元素
        if(hobbys[i].checked){  //checked判断用户是否选择
            console.log(hobbys[i].value);//获取对应value属性的值
        }
    }
}

<body>	
    <h4>请选择爱好</h4>
<input type="checkbox" onclick="selectAllOrNone(this)"/><br/>
    <input type="checkbox" name="hobby" value="1" />1<br/>
        <input type="checkbox"  name="hobby" value="2" />2<br/>
            <input type="checkbox"  name="hobby" value="3" />3<br/>

                <!--
            this--表示当前元素-谁发生了事件就代表谁
                -->
                <script type="text/javascript">
                    function selectAllOrNone(element){
                    var docs =  document.getElementsByName("hobby");
                    for(var i = 0;i<docs.length;i++){
                        docs[i].checked = element.checked;
                    }
                }
</script>
</body>

操作样式

1、操作class属性

2、操作style属性

 div1[0].setAttribute("class","div2");//添加属性-如果有属性 则被替换
div1[0].className="div2";//替换原有样式

div1[0].children[0].style.color = "red";
div1[0].children[0].style.fontSize = "larger";//如果样式是用横线连接则设置时应该用对应的驼峰命名

第三节、操作元素

3.1、创建节点

createElement(”标签名“)

createTextElement();

createAttributeElement();

var ele = document.createElement("p");
var text = document.createTextNode("我是一行文本");

3.2、向父元素添加子元素

父元素.appendChild(子元素)

document.getElementById("div1").appendChild(ele.appendChild(text));

3.3、通过innerHTML属性动态拼接

//console.log(document.getElementById("div1").innerHTML);
var str = "<p>我是一行文本</p>"+
    "<a href='http://www.baidu.com'>百度</a>"+
    "<img src='' /><p>我是一行文本</p>"+
    "<a href='http://www.baidu.com'></a>"


document.getElementById("div1").innerHTML += str; //如果不想覆盖原有的HTML 则需要将原有的获取并拼接至str上

注意：拼接的技巧，如果有数据是动态获取的，则我们先把页面的框架搭建好，然后字符串需要拼接的地方"+内容+"

3.3、删除元素

元素.remove()

父元素.removeChild(子元素)

//document.getElementById("div1").remove();//删除自身及其后代
//document.getElementById("div1").removeChild(document.getElementById("p1"));
document.getElementById("p1").parentElement.removeChild(document.getElementById("p1"));

move()

父元素.removeChild(子元素)

//document.getElementById("div1").remove();//删除自身及其后代
//document.getElementById("div1").removeChild(document.getElementById("p1"));
document.getElementById("p1").parentElement.removeChild(document.getElementById("p1"));