js DOM

最新推荐文章于 2025-04-24 11:59:04 发布

weixin_34232617

最新推荐文章于 2025-04-24 11:59:04 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b03e08b518825426643277a

本文详细介绍了DOM操作的基础知识，包括文档树节点的操作、属性操作、样式操作等。通过具体实例展示了如何使用JavaScript进行DOM元素的选择、创建、修改及样式设置。

DOM编程

文档树
节点操作
属性操作
样式操作
事件

文档树

<html>
<head>
    <meta charset="utf-8" />  
    <link href="main.css" />
</head>
<body>
    <p>
        hello,<span>mooc</span>
        <img src="user.jpg">
    </p>
    <div>学习DOM</div>
</body>复制代码

转换为文档树

节点的遍历

node.parentNode //父节点
    .firstChild //第一个子节点
    .lastChild   //最一个子节点
    .previousSibling  //前一个兄弟节点
    .nextSibling    //后一个兄弟节点复制代码

节点的类型

ELEMENT_NODE     //元素节点
TEXT_NODE      //文本节点复制代码

元素的遍历

//子节点遍历
p.firstElementChild   //第一个元素节点
 .lastElementChild    //最后一个元素节点

//兄弟节点遍历 
em.nextElementChild    //下一个元素节点
  .previousElementChild //前一个元素节点复制代码

节点操作

<html>
<head>
    <meta charset="utf-8" />  
    <link href="main.css" />
</head>
<body>
   <p id="hello" class="mooc">
        hello,<span>mooc</span>
        <img src="user.jpg" alt="">
   </p>
    <div>学习DOM</div>
</body>
</html>复制代码

获取节点

1.getElementById

2.getElementsByTagName

3.getElementsByClassName

4.querySelector/All

1.getElementById //id查找

语法：element=document.getElementById("id")

功能：返回对拥有指定ID的第一个对象的引用

返回值：DOM对象

说明：id为DOM元素上id属性的值

<div class="box" id="box">    
    元素
</div>

<script>
//获取id为box的这个元素
var box=document.getElementById("box");
console.log(box);
</script>复制代码

2.getElementsByTagName //Tag查找

语法：collection=element.getElementsByTagName("tagName")

功能：返回一个对所有tag标签引用的集合

返回值：数组

说明：tag为要获取的标签名称，collection的值是动态的

<ul id="list1">    
<li>前段开发</li>    
<li>服务器端开发</li>    
<li>ui设计</li>
</ul>
<ol>   
<li>js原生</li>    
<li>js框架</li>
</ol>
<script>
//获取页面中的所有li
var lis=document.getElementsByTagName("li");
console.log(lis.length);
// 获取id为list1下所有的li
var lis2=document.getElementById("list1").getElementsByTagName("li");
console.log(lis2.length);</script>复制代码

Users.getElementsByTagName("*")    //获取所有后代元素的所有元素复制代码

3.getElementsByClassName //Tag查找

语法：collection=element.getElementsByClassName(className)

users.getElementsByClassName("user")     //[li.user,li.user,li.user.last]
users.getElementsByClassName("user")[2]     //li.user.last
users.getElementsByClassName("user last")    //获取同时包含‘user last’的Class的元素


复制代码

4.querySelector/All //querySelector获取第一个符合的元素，querySelectorAll获取所有节点

语法：list =element.querySelector/All(selector)

说明：list不是动态的，获取后不会改变了

var users = document.querySelector("#users");    //  获取到div#users
var users = document.querySelectorAll(".user");     //获取到包含“user”类名的元素
document.querySelectorAll("#users.user");   //获取到包含“user”类名的元素  

复制代码

创建节点

语法：element =document.createElement(tagName)

document.createElement("div")    //创建div
document.createElement("a")      //创建a
document.createElement("script")    //创建script
复制代码

修改节点

1.textContent

2.innerText

textContent：节点及其后代节点的文本内容(ie9不支持)

users.textContent;
users_last.textContent;    //'Kash'
users_last.textContent="Tom";    //'Tom'


复制代码

innerText：节点及其后代节点的文本内容（不是w3c规范 ff不支持）

ff兼容

插入节点

1.appendChild

2.insertBefore

appendChild

语法：var achild = element.appendChild(achild);

在后面插入

insertBefore

语法：var achild = element.insertBefore(achild,referenceChild);

在前面插入

删除节点

child = element.removeChild(child)

innerHTML

语法：ele.innerHTML

功能：返回ele元素开始和结束标签之间的HTML

语法：ele.innerHTML="html"

功能：设置ele元素开始和结束标签之间的HTML内容为html

<ul id="list1">
    <li>前段开发</li>
    <li>服务器端开发</li>
    <li>ui设计</li>
</ul>
<ol>
    <li>js原生</li>
    <li>js框架</li>
</ol>
<script>
   var lis=document.getElementById("list1").getElementsByTagName("li");
   for(var i=0,len=lis.length;i<len;i++){
       console.log(lis[i].innerHTML);
       lis[i].innerHTML+="程序";
   }
</script>复制代码

属性操作，获取与设置

语法：ele.getAttribute("attribute")

功能：获取ele元素的attribute属性

说明：1.ele是要操作的dom对象，2.attribute是要获取的html属性（例如：id，type）

//获取属性
<p class="center" id="text"  align="center" data-type="title">    文本</p>
<script>
    var p =document.getElementById("text");
    console.log(p.id);    console.log(p.className);
   //获取class
    console.log(p.align);
       console.log(p.getAttribute("data-type"));  //获取自定义属性
</script>
复制代码

语法：ele.setAttribute("attribute","value")

功能：在ele元素上设置属性

说明：1.ele是要操作的dom对象，2.attribute是要获取的html属性（例如：id，type），3.value为设置的attribute属性的值

<p class="center" id="text"  align="center" data-type="title">    文本</p>
<script>
     //给p设置一个data-color的属性
    var p =document.getElementById("text");
    p.setAttribute("data-color",'red');    //删除p上的align属性
    p.removeAttribute("align");
</script>复制代码

dataset 自定义属性

样式操作

语法：ele.style.styleName=styleValue

功能：设置ele元素的css样式

说明：1.ele为要设置样式的DOM对象，2.styleName为要设置的样式名称，3.styleValaue为设置的样式值

<div class="box" id="box">    
    元素
</div>
<script>
    //设置id为box的这个元素的文字颜色
    var box=document.getElementById("box");
    box.style.color='#f00';
    box.style.fontWeight='bold';
</script>复制代码

<ul id="list1">
    <li>前段开发</li>
    <li>服务器端开发</li>
    <li>ui设计</li>
    <li>服务器端开发</li>
    <li>ui设计</li>
    <li>服务器端开发</li>
    <li>ui设计</li>
</ul>
<ol>
    <li>js原生</li>
    <li>js框架</li>
</ol>
<script>
    // 获取id为list1下所有的li,改变文字颜色
    var lis2 = document.getElementById("list1").getElementsByTagName("li");
    //遍历所有li
    for(var i=0,len=lis2.length;i<len;i++ ){
        lis2[i].style.color='#00f';
        if (i==0) {
            lis2[i].style.backgroundColor='#ccc';
        }else if (i==1) {
            lis2[i].style.backgroundColor = '#666';
                    }else if (i==2) {
            lis2[i].style.backgroundColor = '#999';
                    }else{
            lis2[i].style.backgroundColor = '#333';
                    }
    }</script>复制代码

语法：element.style.cssText

element.style.cssText ="border-color:red;color:red"
复制代码

更新class

element.className +="invalid";复制代码

更新样式表

element.href="url"
复制代码

获取样式

var style = window.getComputedStyle(element);复制代码

className

语法：ele.className

功能：返回ele元素的class属性

语法：ele.className="cls"

功能：设置ele元素的class属性为cls

<head>
<style>
       .on{border-bottom: 1px solid #0f0;}
       .current{background: #ccc;color: #f00;}
</style>
</head>
<body>
<ul id="list">
    <li>前段开发</li>
    <li class="on">服务器端开发</li>
    <li>ui设计</li>
</ul>
<ol>
    <li>js原生</li>
    <li>js框架</li>
</ol>
<script>
   var lis=document.getElementById("list").getElementsByTagName("li");
   for(var i=0,len=lis.length;i<len;i++){
       console.log(lis[i].innerHTML);
       lis[1].className="current";  //会覆盖原来的class
   }
</script>
</body>复制代码