JavaScript入门笔记-Dom篇-增删改查

最新推荐文章于 2023-10-15 10:22:53 发布

ALonelyLemon

最新推荐文章于 2023-10-15 10:22:53 发布

阅读量227

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript Dom

本文链接：https://blog.csdn.net/lemon_yu/article/details/88933993

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

DOM

DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

JS通过DOM操作HTML文档，将网页所有部分转换为对象，利用模型表示对象关系

节点

节点是构成html的基本单元

<html lang="en">
    <body>
        <h1 id ="hel">hello</h1>
    </body>
</html>

节点分四类，以上面一行代码为例

文档节点：整个文件
元素节点< html> < body>< h1 >
属性节点:lang；id
文本节点:“hello”

模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
</head>
<body>
    
<a herf="">我的链接</a>
<h1>文档标题</h1>

</body>
</html>

这是文档

这是上面文档的模型，我们可以看到他是树形结构,表现了节点间的关系

Document对象

JS想对HTML进行操作，应先获取对象，从模型可以看出想要方便的定位对象，文档是最好的选择，所以有了Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

Dom的增删改查

Dom查询(get)

当我们需要对文档进行操作时我们就需要一个切入点，通过切入点进入模型内后，我们就可以向上找他的父亲向下找他的儿子孙子等等。

document.getElementById();       //通过id获取  
document.getElementsByTagName();  //通过标签名获取  
document.getElementsByName();     //通过name获取  

document.getElementsByClassName();//通过class获取，ie8可能不兼容


//只有id的获取不是elements，我们在学习css时了解过，id是不能重复的，
//所以id获取一个对象；但标签和name获取的是一组他们会返回一个数组


//-------------------------------------------------------
  document.body;//获取body标签
  document.Element;//获取html标签
  document.all;//所有元素

下面通过id获取的例子

<body>
    <button id="btn">确认</button>

<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("文件已提交");
        btn.innerHTML = "重新提交";
    }

</script>

</body>
//点击按钮弹出警告框，按钮的文本被修改

配合函数使用

<body>
<button id="btn">确认</button>

<script>
    var mClick = function(id,fun){
        var btn = document.getElementById(id);
        btn.onclick = fun;
    }                               //我们还可以用响应函数
    
    
    mClick("btn",function(){        //注意括号，因为这是一个函数写在mClick（）；内
        alert("文件已提交");
        btn.innerHTML = "重新提交";
    });                             //下半括号
           
                                    
    /*
    传给形参fun的部分
    function(){        
        alert("文件已提交");
        btn.innerHTML = "重新提交";
    }
    */

</script>

</body>

进一步缩小范围

//这个例子就是搜索id为btn节点下的li
document.getElementById("btn");//全局搜索id为btn的元素
                //我们还可以进一步搜索
var bc = btn.getElementByTagName("div");
//搜索btn的子元素中的li节点

当然我们可能要获取节点的不止一种


bc = btn.childNodes;//搜索btn全部子**节点**
        .firstchild;//获取第一个子节点
        .lastchild;//获取最后一个子节点
//这条命令甚至会将空白内容（比如为了代码整齐写的回车和空格）当做文本节点
//神奇的是这个看着没用特性是ie8之后获得的

        .children//获得当前元素的所有子**元素**，不包括文本节点
        
        .parentNode//获得当前元素的父亲节点

我们可以用class，id等对元素进行定位，这和css如此相似；那么如果可以使用css选择器岂不是更方便


document.querySelector();//通过css选择器获取

document.querySelector(".btn div");//传入的字符串与我们的css选择器格式相同
//这个方法只会返回第一个符合条件的元素

document.querySelectorAll();//如果都要返回请使用这一个，这个方法会返回一个数组，哪怕只有一个符合条件

Element对象

在找到切入点后我们就可以对节点进行操作，DOM Element 对象方法非常多，使用时查找手册即可

常见方法


.innerHtml//获取内容，连同标签
//可以写入内容，已有内容赋值会覆盖其中的内容
.innerText//获取内容，不带标签

元素.属性名//读取元素节点内容
.className//class是一个特殊属性，我们不能用上一行的方法调用

了解document后我们学会寻找切入点进入模型并对节点进行操作，，仅仅对已有的对象进行操作是不够的。
Dom对象的常用方法

方法	描述
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

创建与添加（create,append）


document.createElement("div"); //创建元素节点
document.createTextNode("文本"); //创建文本节点

父节点.appendChild(子节点)；//向父节点中加入一个子节点

var a = document.createElement("a");
var gTxt = document.createTextNode("@_@");

例

<body>

<div id="d1"></div>
<script>

   var d1 = document.getElementById("d1");//通过id获得块d1
   var p = document.createElement("p");//创建一个p元素节点p
   var gTxt = document.createTextNode("Σσ(・Д・；)我我我什么都没做!!!つ");//创建一个文本节点gTxt

   p.appendChild(gTxt);;//将gTxt设为p的孩子节点        gTxt--父-->p
   d1.appendChild(p);;//将p设为d1的孩子节点   d1--父-->gTxt--父-->p

   /*
       完成后内存中变为
       <div id="d1>
           <p>Σσ(・Д・；)我我我什么都没做!!!つ</p>
       </div>
   */
   //---------------------------------------------------------
   /*
       上面的写法可能会显得繁琐，
       那么既然innerHTML能修改内容，有没有办法只进行插入而不覆盖？
      这个可以有： “+=”可以帮助我们，在原有内容上进行添加
   */

   d1.innerHTML += "<p>(=￣ω￣=)我已经看穿了一切</p>";//"+="是一个符号之间不要有空格

   /*
   这个操作看似很简单？相比之下上面的方法蠢透了？
   调试查看内存你会发现，这行操作实际上是删除了原有内容，重写了一遍
   也就是内容会全部重新加载，并且会失去已有的绑定
   */

   //-----------------------------------------------------

   /*
      那么问题又来了，有没办法集合两者优势？
   */
   var d2 = document.createElement("div");//我们先创建一个容器，这里用块仅是因为比较方便，还可以使用其他元素
   d2.innerHTML = "<p>_φ(❐_❐✧ 人丑就要多读书</p>";//修改这个容器不会影响到原有内容
   d1.appendChild(d2);//将修改后的容器插入
   
   //问题完美解决
</script>

</body>

插入替换删除（insert，replace，remove）

父节点.insertBefore(新的节点,已有节点);//插入节点

父节点.replaceChild(新的节点,已有节点);//替换节点

父节点.removeChild(需要删除的节点);//删除节点
//假设我们要删除id为d1的元素
//根据语法规则我们不能直接删除d1
//我们可以通过.parentNode先获取他的父亲
d1.parentNode.removeChild(d1);
//这种方法看起来好蠢，但似乎并没有办法直接通过id删除节点

ALonelyLemon

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门笔记-Dom篇-增删改查

DOMDOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。JS通过DOM操作HTML文档，将网页所有部分转换为对象，利用模型表示对象关系文章目录DOM节点模型Do...
复制链接

扫一扫