js DOM实现增删改查

最新推荐文章于 2023-08-31 09:55:22 发布

努力奔跑的蜗牛

最新推荐文章于 2023-08-31 09:55:22 发布

阅读量402

点赞数

分类专栏： js javascript DOM

本文链接：https://blog.csdn.net/qq_42079388/article/details/104636181

版权

js 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

DOM

4 篇文章 0 订阅

订阅专栏

文章目录

什么是DOM

DOM，全称Document Object Model文档对象模型。
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

文档

-文档表示的就是整个的HTML网页文档

对象

-对象表示将网页中的每一个部分都转换为了一个对象。

模型

-使用模型来表示对象之间的关系，这样方便我们获取对象。

节点：Node——构成HTML文档最基本的单元。

常用节点分为四类
-文档节点：整个HTML文档
-元素节点：HTML文档中的HTML标签
-属性节点：元素的属性
-文本节点：HTML标签中的文本内容

DOM查询

获取元素节点通过document对象调用

-通过id属性获取一个元素节点对象

<body>
<select multiple="multiple" id="rightSelect" class="main" size="2">
    <option value="" >医生</option>
    <option value="" >护士</option>
</select>
</body>

getElementById()

 var rightOption= document.getElementById("rightSelect");

-通过标签名获取一组元素节点对象

<body>
<select multiple="multiple" id="rightSelect" class="main" size="2">
    <option value="" >医生</option>
    <option value="" >护士</option>
</select>
</body>

getElementsBy TagName(）

var rightOption = document.getElementByTagName("opthon");

-通过name属性获取一组元素节点对象

<body>
<select multiple="multiple" id="rightSelect" class="main" size="2">
    <option value="" name="opn">医生</option>
    <option value="" name="opn">护士</option>
</select>
</body>

getElementsByName(）

var opn = document.getElementByName("opn");

获取元素节点的子节点

通过具体的元素节点调用
1.getElementsByTagName(）
和上面的通过标签名获取一样
-方法，返回当前节点的指定标签名后代节点
2.childNodes
-属性，表示当前节点的所有子节点
childNodes属性会获取包括文本节点在内的所有节点
根据DOM规定，标签间空白也会当成文本节点

<body>
<select multiple="multiple" id="rightSelect" class="main" size="2">
    <option value="" >医生</option>
    <option value="" >护士</option>
</select>
</body>

getElementById()

 var rightOption= document.getElementById("rightSelect").childNodes;

注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，所以该属性在IE8中会返回4个子元素而其他浏览器是9个

children属性可以获取当前元素的所有子元素

<body>
<select multiple="multiple" id="rightSelect" class="main" size="2">
    <option value="" >医生</option>
    <option value="" >护士</option>
</select>
</body>

getElementById()

 var rightOption= document.getElementById("rightSelect").children;

3.firstChild
-属性，表示当前节点的第一个子节点
根据DOM规定，标签间空白也会当成文本节点
firstElementChild获取当前元素的第一个子元素
firstElementChild不支持IE8及以下的浏览器，如果需要兼容他们尽量不要使用

<body>
<select multiple="multiple" id="rightSelect" class="main" size="2">
    <option value="" >医生</option>
    <option value="" >护士</option>
</select>
</body>

getElementById()

 var rightOptionFirst = document.getElementById("rightSelect").firstChild;

4.lastChild
-属性，表示当前节点的最后一个子节点
根据DOM规定，标签间空白也会当成文本节点
lastElementChild获取当前元素的最后一个子元素
lastElementChild不支持IE8及以下的浏览器，如果需要兼容他们尽量不要使用

<body>
<select multiple="multiple" id="rightSelect" class="main" size="2">
    <option value="" >医生</option>
    <option value="" >护士</option>
</select>
</body>

getElementById()

 var rightOptionLast = document.getElementById("rightSelect").lastChild;

获取父节点和兄弟节点

通过具体的节点调用

parentNode
-属性，表示当前节点的父节点

<body>
<select multiple="multiple" id="rightSelect" class="main" size="2">
    <option value="" >医生</option>
    <option id="optionTwo" value="" >护士</option>
</select>
</body>

getElementById()

 var rightOptionTwo = document.getElementById("optionTwo").parentNode;

previousSibling（也可能获取到空白的文本）
-属性，表示当前节点的前一个兄弟节点

<body>
<select multiple="multiple" id="rightSelect" class="main" size="2">
    <option value="" >医生</option>
    <option id="optionTwo" value="" >护士</option>
</select>
</body>

getElementById()

 var rightOptionTwo = document.getElementById("optionTwo").previousSibling;

nextSibling（也可能获取到空白的文本）
-属性，表示当前节点的后一个兄弟节点

<body>
<select multiple="multiple" id="rightSelect" class="main" size="2">
    <option value="" >医生</option>
    <option id="optionTwo" value="" >护士</option>
    <option value="" >护士</option>
</select>
</body>

getElementById()

 var rightOptionTwoNext = document.getElementById("optionTwo").nextSibling;.

previousElementSibling获取前一个兄弟元素，IE8及以下不支持

<body>
<select multiple="multiple" id="rightSelect" class="main" size="2">
    <option value="" >医生</option>
    <option id="optionTwo" value="" >护士</option>
    <option value="" >护士</option>
</select>
</body>

getElementById()

 var rightOptionTwoPrevious = document.getElementById("optionTwo").previousElementSibling;.

innerText
-该属性可以获取到元素内部的文本内容
-它和innerHTML类似，不同的是它会自动将html标签去除

<body>
<select multiple="multiple" id="rightSelect" class="main" size="2">
    <option value="" >医生</option>
    <option id="optionTwo" value="" >护士</option>
    <option value="" >护士</option>
</select>
</body>

getElementById()

 var rightOptionTwoText = document.getElementById("optionTwo").innerText;.

文本框的value属性值，就是文本框中填写的内容
在document中有一个属性body，它保存的是body的引用
document.documentElement保存的是html根标签
document.all代表页面中所有的元素
根据元素的class属性值查询一组元素节点对象
getElementsByClassName()可以根据class属性值获取一组元素节点对象，
但是该方法不支持IE8及以下的浏览器
document.querySelector()
-需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
-虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
-使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
document.querySelectorAll()
该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
-即使符合条件的元素只有一个，它也会返回数组

DOM 操作内联样式

通过JS修改元素的样式：

语法：元素.style.样式名=样式值
通过JS读取元素的样式：
语法：元素.style.样式名

<body>
    <div class="one" id="box" style="width: 100px;height: 100px; background-color: pink;">我是个div盒子</div>
<script>
		// 需求 : 使用js来修改元素的背景颜色
        // 获取元素
        var one = document.getElementsByClassName("one")[0];
        // 对象的取值和赋值方法  : 点语法 : 对象名.属性名          字符串语法 : 对象名["属性名"]
        console.log(one);
        console.log(one.id);
        console.log(one["id"]);
        console.log(one.style);
        console.log(one.style.width);
        console.log(one.style.height);
        // console.log(one.style.background-color); // 报错 样式名不合法
        console.log(one.style.backgroundColor); 
        one.style.backgroundColor = "green";
      //元素.style.样式名 = ‘样式’
    <script>
</body>

通过style属性设置和读取的都是内联样式
无法读取样式表中的样式

注意：如果CSS的样式名中含有-，
这种名称在JS中是不合法的比如background-color需要将这种样式名修改为驼峰命名法
去掉-，然后将-后的第一个字母大写，backgroundColor

我们通过style属性设置的样式都是内联样式，
而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
但是如果在样式中写了！important，则此时样式会有最高的优先级，
即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效所以尽量不要为样式添加！important

DOM 实现增删改

1.document.createElement（）
// 创建一个新option标签
var op = document.createElement("option");

可以用于创建一个元素节点对象，
它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
并将创建好的对象作为返回值返回

2.document.createTextNode（）
// 创建一个文本节点
var opText = document.createTextNode("我是文本节点");

可以用来创建一个文本节点对象
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

3.appendChild（）
// 创建一个新option标签
var op = document.createElement("option");
rightSelect.appendChild(op);

-向一个父节点中添加一个新的子节点
-用法：父节点.appendChild（子节点）；

4.insertBefore（）
var op = document.createElement("option");
rightSelect.insertBefore(op,optionTwo);

-可以在指定的子节点前插入新的子节点
-语法：父节点.insertBefore（要插入的节点对象，要添加新的节点前的子节点）；

5.replaceChild（）
var op = document.createElement("option");
rightSelect.replaceChild(op,optionTwo);

-可以使用指定的子节点替换已有的子节点
-语法：父节点.replaceChild（要插入的节点对象，要添加新的节点前的子节点）；

removeChild（）
rightSelect.removeChild(optionTwo)

-可以删除一个子节点
-语法：父节点.removeChild（子节点）；
另一种删除方法
-子节点.parentNode.removeChild（子节点）；

使用innerHTML也可以完成DOM的增删改的相关操作
一般我们会两种方式结合使用
但是默认推荐使用第一种方法

努力奔跑的蜗牛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js DOM实现增删改查

文章目录什么是DOM文档对象模型节点：Node——构成HTML文档最基本的单元。DOM查询获取元素节点通过document对象调用获取元素节点的子节点获取父节点和兄弟节点DOM 操作内联样式通过JS修改元素的样式：DOM 实现增删改什么是DOM DOM，全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的...
复制链接

扫一扫