06-JavaScript DOM操作

于 2023-08-21 10:55:29 发布
阅读量87 收藏
点赞数
文章标签： javascript 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yfp020907/article/details/132403302
版权

1.获取节点的三种方法

  1.1获取标签名节点

  1.2获取类名节点

  1.3获取id节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box" id="pox">在很久很久以前</div>
    <div class="box">我遇到了你</div>
    <div class="box">那时候的我还没有现在的成熟</div>
    <div class="box">还是个混球</div>


    <script>
        // 1.通过标签名获取节点
        // 获取到所有对应标签的元素所组成的伪数组
        // 获取到确定的某个元素，跟上对应元素的索引下标
        var box = document.getElementsByTagName('div')[0];
        console.log(box);

        // 2.通过类名获取节点
        // 获取到所有对应类名所组成的伪数组
        // 获取到确定的某个元素，跟上对应的元素的索引下标
        var box1 = document.getElementsByClassName('box')[1];
        console.log(box1);

        // 3.通过id获取节点，直接获取到确定的元素
        var pox = document.getElementById('pox');
        console.log(pox);

    </script>
</body>

</html>

2.获取特殊节点

   2.1获取整个html节点

   2.2获取body节点

   2.3获取title（标题）节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 获取整个 html 节点
        // var _html = document.documentElement;
        // console.log(_html);

        //获取  body 节点
        var _body = document.body;
        console.log(_body);

        // 获取title（文档标题）节点
        var tit = document.title;
        console.log(tit);
    </script>
</body>

</html>

3.修改html内容

   3.1通过innerText

   3.2通过innerHTML

两者的区别在于，innerText只能插入文本，不可以识别HTML标签；innerHTML可以识别标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>天青色等烟雨</div>
    <script>
        // 1.获取节点
        var box = document.getElementsByTagName('div')[0];
        console.log(box);

        // 2.修改节点内容
        //   1.通过innerText修改
        box.innerText = '而我在等你';

        //   2.通过innerHTML 修改
        box.innerHTML = '炊烟袅袅升起';

        // 3.innerText 和 innerHTML的区别：innerText只能插入文本，不可以识别标签，innerHTML可以识别标签
        box.innerText = '<b>加粗的内容</b>';
        box.innerHTML = '<b>加粗的内容</b>';

        // 获取节点内容
        console.log(box.innerText);


    </script>
</body>

</html>

  3.3 修改CSS样式

 一个单词直接.样式=...，如果出现连词符号“-”，如“font-size”，第二个单词首字母要大写，“fontSize”，通过修改CSS样式会直接写到行内

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            color: skyblue;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">窗外的麻雀</div>
    <script>
        // 获取节点
        var box = document.getElementsByClassName('box')[0];
        console.log(box);

        // 改变CSS样式
        // 一个单词直接.写，如果出现连词符号‘-’，就不能直接写了，把第二个单词首字母大写
        // 通过 .style.样式 修改或添加的样式会出现在行内样式
        box.style.color = 'orange';
        box.style.backgroundColor = 'skyblue';
    </script>
</body>

</html>

  3.4改变html属性

    3.4.1 通过  元素.属性名（className）

    3.4.2 通过getAttribule 获取属性

             通过setAttribule  修改属性

     3.4.3 removeAttribule 删除属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">天生我才必有用，千金散尽还复来</div>
    <script>
        // 获取元素
        var box = document.getElementsByClassName('box')[0];
        console.log(box);

        // 1.元素.属性名
        console.log(box.className);
        // 修改元素属性
        // box.className = 'pox pox1';

        // 2.通过getAttribute() 获取属性
        console.log(box.getAttribute('class'));

        // 通过 setAttribule() 设置属性
        box.setAttribute('class', 'pox1 pox2');

        // 删除属性 removeAttribute()
        box.removeAttribute('class');

    </script>
</body>

</html>

4.操作html元素

 4.1 新建节点  createElement

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 创建节点
        var now = document.createElement('h1');
        console.log(now);

        // 修改节点内容
        now.innerText = '你好';
        now.innerHTML = '<h2>你好</h2>';

        document.write('now');


    </script>
</body>

</html>

4.2 新建文本节点 createTextNode()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 新建文本节点
        var textNode = document.createTextNode('你好');
        console.log(textNode);

        // 新建节点
        var now = document.createElement('h1');

        now.appendChild(textNode);
        console.log(now);
    </script>
</body>

</html>

4.3 追加节点 appendChild()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>123</div>
    <script>
        // 新建文本节点
        var text = document.createTextNode('123');
        console.log(text);

        // 获取父节点
        var box = document.getElementsByTagName('div')[0];

        // 追加节点
        box.appendChild(text);

    </script>
</body>

</html>

4.4 父节点.insertBefor（新建节点，目标节点） 插入节点

如果想在后面插入直接追加节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <i>123</i>
    </div>
    <script>
        //   获取父节点
        var box = document.getElementsByTagName('div')[0];

        // 获取目标节点
        var nowbox = document.getElementsByTagName('i')[0];

        // 新建节点
        var now = document.createElement('p');

        // 插入节点  父节点.insertBefor(新建节点，目标节点)
        box.insertBefore(now, nowbox);


        //    注意：没有 insertAfter()
        // 要想在父节点后面插入 appendChild()

    </script>
</body>

</html>

4.5 父节点.replaceChild（新节点，目标节点）  替换节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <li>五花马，千金裘</li>
    </div>
    <script>
        //    获取父节点
        var box = document.getElementsByTagName('div')[0];

        // 获取目标节点
        var box1 = document.getElementsByTagName('li')[0];

        // 新建节点
        var now = document.createElement('b');

        // 替换节点   父节点.replaceChild(新节点，目标节点)
        box.replaceChild(now, box1);


    </script>
</body>

</html>

4.6 removeChild（目标节点） 删除节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <i>天生我才必有用</i>
    </div>
    <script>
        // 获取节点
        // 父节点
        var box = document.getElementsByClassName('box')[0];

        // 目标节点
        var box1 = document.getElementsByTagNam('i')[0];

        // 删除节点
        box.removeChild(box1);
    </script>
</body>

</html>

4.7 remove（） 删除本身节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <i>天生我才必有用</i>
    </div>

    <script>
        // 获取元素
        var box = document.getElementsByTagName('i')[0];

        // 删除本身节点
        box.remove();
    </script>
</body>

</html>

4.8 克隆节点

cloneNode() 在默认情况下，只克隆本身节点，不克隆节点内的元素

cloneNode(true) 深度克隆

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <i>天青色等烟雨</i>
    </div>

    <script>
        // 获取元素
        var box = document.getElementsByTagName('div')[0];

        // 克隆节点  默认情况下只克隆节点本身，而不克隆节点内的元素
        console.log(box.cloneNode());

        // 深度克隆
        console.log(box.cloneNode(true));
    </script>
</body>

</html>

5.根据节点关系获取节点   （父   子   兄弟）

  5.1 parentNode  获取父节点

 5.2 nextSibling  下一个兄弟节点（幽灵节点）

       nextElementSibling 下一个兄弟节点

  5.3 previousSibling  上一个兄弟节点（幽灵节点）

        previousElementSibling 上一个兄弟节点

  5.4 firstChild 第一个孩子节点（幽灵节点）

        firstElementChild 第一个孩子节点

  5.5 lastChild  最后一个孩子节点（幽灵节点）

        lastElementChild  最后一个孩子节点

  5.6 childNodes  所有孩子节点组成的伪数组（包括幽灵节点）

        children  所有孩子节点组成的伪数组（不包含幽灵节点）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="father">
        <div class="box1">123456</div>
        <div class="box2">
            <div class="box21">5633</div>
            <div class="box22">698741</div>
        </div>
        <div class="pox">123</div>
    </div>

    <script>
        //  获取父节点
        var box = document.getElementsByClassName('box2')[0];
        console.log(box);

        var sat = box.parentNode;
        console.log(sat);
        // 1.下一个兄弟节点
        // nextSibling 幽灵节点（看不见摸不着，只是放在那里）
        console.log(box.nextSibling);  //text 幽灵节点

        // nextElementSibling 下一个兄弟节点，IE9以上才支持
        console.log(box.nextElementSibling);

        // 2.上一个兄弟节点
        // previousSibling 幽灵节点
        console.log(box.previousSibling);
        // previousElementSibling 上一个兄弟节点
        console.log(box.previousElementSibling);

        // 3.访问第一个孩子节点
        // firstChild  幽灵节点
        console.log(box.firstChild);
        // firstElementChild
        console.log(box.firstElementChild);

        // 4.访问最后一个孩子节点
        // lastChild  幽灵节点
        console.log(box.lastChild);
        // lastElementChild 最后一个孩子节点
        console.log(box.lastElementChild);

        // 5.访问孩子节点
        // childNodes 所有孩子节点组成的伪数组，包括幽灵节点
        console.log(box.childNodes);

        // children 所有孩子节点组成的伪数组，不包括幽灵节点
        console.log(box.children);
    </script>
</body>

</html>

总结

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.获取节点的三种方法
        //     1.1 getElementsByTagName 获取标签名节点
        //     1.2 getElementsByClassName 获取类名节点
        //     1.3 getElementById  获取id 节点
        // 2.获取特殊节点
        //     2.1  document.documentElement 获取整个html节点
        //     2.2  document.body  获取body节点
        //     2.3  document.title   获取标题（title）节点
        // 3.修改HTML内容
        //     3.1  通过innerText修改
        //     3.2  通过innerHTML修改
        //           两者区别在于innerText不能识别标签，innerHTML可以识别标签
        //     3.3  修改CSS样式
        //          元素.style.样式
        //          如果样式的单词出现“-”的话，第二个单词首字母要大写
        //     3.4  改变html属性
        //          3.4.1 元素.className（属性名）
        //          3.4.2 通过getAttribule() 获取属性
        //          3.4.3 通过setAttribule() 设置属性
        //          3.4.4 removeAttribule() 删除属性
        // 4. 操作html 元素
        //          4.1 document.createElement() 新建节点
        //          4.2 document.createTextNode() 新建文本节点
        //          4.3 appendChild() 追加节点
        //          4.4 父节点.insertBefor(新建节点.目标节点) 插入节点
        //               要想在后面插入直接appendChld追加节点
        //          4.5 父节点.replaceChild(新节点.目标节点)替换节点
        //          4.6 父节点.removeChild(目标节点) 删除节点
        //          4.7 remove() 删除本身节点
        //          4.8 cloneNode() 克隆节点，默认情况下只克隆本身节点，不克隆节点内的元素
        //              cloneNode(true) 深度克隆
        // 5.根据节点关系获取节点  父  子  兄弟
        //          5.1 parentNode 获取父节点
        //          5.2 nextSibling  下一个兄弟节点（幽灵节点）
        //              nextElementSibling 下一个兄弟节点
        //          5.3 previousSibling  上一个兄弟节点（幽灵节点）
        //              previousElementSibling 上一个兄弟节点
        //          5.4 firstChild 第一个孩子节点（幽灵节点）
        //              firstElementChild 第一个孩子节点
        //          5.5 lastChild  最后一个孩子节点（幽灵节点）
        //              lastElementChild  最后一个孩子节点
        //          5.6 childNodes  所有孩子节点组成的伪数组（包括幽灵节点）
        //              children  所有孩子节点组成的伪数组（不包含幽灵节点）
        // 6. 旗帜法则  flag
    </script>
</body>

</html>

yfp020907
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js_DOM中获取节点的几种方法总结
angrynouse的博客
11-12 1368
getElementById... ...
如何批量操作
u010536669的博客
12-28 244
首先在页面设置checkbox，设置名称为ids。 然后把所有选中的id，拼接成一个字符串   allid                 var allid = ''; for(var i=0;i&lt;document.getElementsByName('ids').length;i++){ if(document.getElementsByName('ids')[i].c...
js小练习：利用getElementsByTagName方法、for循环、this指针、数组实现对多个相同元素value值的改变
一个程序员-二白的博客
10-18 3006
1.练习内容： 在页面中添加三个按钮，当点击按钮时，按钮的值循环发生改变。 例如三个按钮的默认值都为A,当任意点击一个按钮时，其默认值变成B，再次点击变成C，再点一次又变为A. 2.源代码：     pageEncoding="utf-8"%> ??????? input{ height:30px; width:50px; } windo
2020-09-27
m0_49986452的博客
09-27 189
### 代码 e.target 触发事件的节点 .mouseenter 事件类型:鼠标悬浮上时(hover) .click 事件类型:点击 .addEventListener(事件类型,事件处理函数,Boolean) 例 arEle.addEventListener("click", function () {},
通过getElementsByTagName具体是怎么更改dom属性的
chenxiang0708的博客
12-15 1553
<body> <p>111</p> <p>222</p> <p>333</p> <script> var p=document.getElementsByTagName('p'); console.log(typeof p)//object // 0: p // 1: p // ...
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
JavaScript DOM常用操作代码汇总
10-15
- 通过DOM操作，开发者可以动态更新网页内容，如响应用户交互或异步数据加载。 - 可以使用DOM来定位和修改样式，比如改变元素的颜色或大小。 - 事件处理常与DOM结合，如监听点击事件并执行相应的功能。 - 动画...
javascript-challenge:JavaScript家庭作业-JavaScript和DOM操作
04-06
JavaScript家庭作业-JavaScript和DOM操作 背景 唤醒绵羊皮！ 地球外的威胁已经到了地球，我们在ALIENS-R-REAL收集了所有我们可以证明的目击者报告！ 我们现在需要做的就是将这些信息在线发布，以供全世界查看，然后...
纯JavaScript操作DOM节点
05-22
纯JavaScript操作DOM节点，通过动态JS创建元素标签，自定义元素的个数，并显示序号和对应的正则表达式验证和图片类型大小验证，，在前端用户姓名和性别多选框的取值已拿到，最后把后面的if else代码放开就可以了，...
JavaScript家庭作业-JavaScript和DOM操作
02-26
JavaScript家庭作业-JavaScript和DOM操作 背景 唤醒绵羊皮！ 地球外的威胁已经到了地球，我们在ALIENS-R-REAL收集了所有我们可以证明的目击者报告！ 我们现在需要做的就是将这些信息在线发布，以供全世界查看，然后...
获取动态添加的节点的ID
感恩、奋进、自信
09-15 3340
目的：在网页设计的过程中，有时候我们需要获取动态添加的节点的id，从而设置相应的属性或者事件。方法：可以给动态添加的内容加上一个不显示的input，将其value设置为后台传过来的数据的某一个变量值。如：'&lt;input type="hidden" value="'+activity_id+'" name="activity_id" /&gt;'var li_str ='&lt;li clas...
document对象+获取节点三种方法演示：
xdd_lmd的博客
07-30 6329
document对象的演示。 该对象将标记型文档进行封装。 该对象的作用，是可以对标记型文档进行操作。 最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点。 要想获取节点，必须要先获取到节点所属的文档对象document。 所以document对象最常见的操作就是获取页面中的节点。 获取节点的方法体现： 1，getElementById:通过标签的id属性值获取
功能：获取当前选中节点的子节点id集合。
ouou009的专栏
05-19 2204
功能：获取当前选中节点的子节点id集合。 步骤：1.获取当前节点            2.用ztree的方法transformToArray()获取当前选中节点（含选中节点）的子节点对象集合。            3.遍历集合，取出需要的值。 treeNode：当前选中节点对象 function getChildNodes(treeNode) {
ztree根据ID获取节点node并修改其属性
热门推荐
群来群往的博客
10-19 1万+
0.页面中准备树的ul &lt;ul id="treeDemo10" class="ztree" style="display: none;"&gt;&lt;/ul&gt;  1.生成部门树的JS // 查询外部部门结构 var searchUnitTree = function() { $.ajax({ url : contextPath + '/exam_...
根据节点ID和节点类型获取节点（TreeView控件）
cn_514的博客
04-19 1553
/// <summary> ///根据节点ID和节点类型获取节点 /// </summary> /// <param name="tnParent">指定节点</param> /// <param name="nNodeType">节点图标</param&g...
树形结构中根据id获取指定节点
zw_wen的博客
05-27 2395
/** * @description: 根据id获取指定节点 * @params: id-要查询的节点id * @params: tree-树形结构的数组 * @return: 要查找的节点对象 **/ var getItemByIdInTree = (id, tree) => { let res = null for(let i=0;i<tree.length;i++) { let ele = tree[i] if(.
JS获取子节点、父节点和兄弟节点id的方法
李格格
05-10 4539
首先了解parentNode,parentElement;childNodes,children,nextSibling 和nextElementSibling的区别之前，必须对Dom树有一定的了解，在Dom文档结构中，HTML页面每一部分都是由节点组成的，节点的类型一共有3种，元素节点，文本节点，属性节点，从图中可以看出属性节点属于元素节点的分支，一般不常考虑。 nextSibling属性与nextElementSibling属性的差别： nextSibling属性返回元素节点之后的兄弟节点（包括文本节.
获取树节点的id：
L-BAKE
09-28 1268
<br />获取树节点的id：<br />currentNode.getRecord().getValue(“category_id”)获取分类的id号
javascript dom 操作 局部刷新
最新发布
08-30
实现JavaScript DOM操作局部刷新的方法有以下几种： 1. innerHTML方法：通过获取某个元素的innerHTML属性，可以将该元素的内容替换为新的HTML内容，从而实现局部刷新。 2. createElement和appendChild方法：通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值