AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端（二十）：DOM基础操作

2023-07-21 115
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： DOM基础操作

getAttribute setAttribute

<div id="box" class="box" data-name="Lee">Lee</div>
<script>
    let dom = document.getElementById('box');
    let name = dom.getAttribute('data-name');
    console.log(name)   // Lee
    dom.setAttribute('data-age', 23)
    let age = dom.getAttribute('data-age');
    console.log(age)    // 23
    console.log(dom)    // <div id="box" class="box" data-name="Lee" data-age="23">Lee</div>
</script>

childNodes 空格换行也会被算作节点

<div id="box">
    <p id="a">Lee</p>
    <i>23</i>
    <span>男</span>
</div>
<script>
    let dom = document.getElementById('box');
    console.log(dom.childNodes);    // NodeList(7) [text, p#a, text, i, text, span, text]
</script>

attributes

<p id="box" data-name="Lee">Lee</p>
<script>
    let box = document.getElementById('box');
    // NamedNodeMap {0: id, 1: data-name, id: id, data-name: data-name, length: 2}
    console.log(box.attributes); 
</script>

nodeType 元素节点-1 属性节点-2 文本节点-3

<p id="box" data-name="Lee">Lee</p>
<script>
    let box = document.getElementById('box');
    let name = box.attributes['data-name']
    // 元素节点 1 <p id="box" data-name="Lee">Lee</p>
    console.log('元素节点', box.nodeType, box); 
    // 属性节点 2 data-name="Lee"
    console.log('属性节点', name.nodeType, name);
    // 文本节点 3 "Lee"
    console.log('文本节点', box.childNodes[0].nodeType, box.childNodes[0]);
</script>

nodeValue 修改节点的值

<p id="box" title="Lee">Lee</p>
<script>
    let box = document.getElementById('box');
    box.attributes['title'].nodeValue = 123;
    box.childNodes[0].nodeValue = 123;
    console.log(box); // <p id="box" title="123">123</p>
</script>

firstChild lastChild

<div id="box1">
    <p>Lee</p>
    <span>23</span>
</div>

<div id="box2"><p>Lee</p> <span>23</span></div>

<script>
    let box1 = document.getElementById('box1');
    console.log(box1.firstChild); // #text
    console.log(box1.lastChild); // #text

    let box2 = document.getElementById('box2');
    console.log(box2.firstChild); // <p>Lee</p>
    console.log(box2.lastChild); // <span>23</span>
</script>

createElement createTextNode appendChild

let p = document.createElement('p');
p.setAttribute('id', 'text');
let txt = document.createTextNode('Hello Lee!');
console.log(txt); // "Hello Lee!"
// err Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
// p.appendChild("Hello Lee!")
p.appendChild(txt)
document.body.appendChild(p);
console.log(p); // <p id="text">Hello Lee!</p>

parentNode insertBefore-在已有元素前插入一个新元素

<p id="name">
    <i id="age">24</i>
</p>
<script>
    let span1 = document.createElement('span');
    let prosper = document.createTextNode('Prosper');
    span1.appendChild(prosper);

    let span2 = document.createElement('span');
    let lee = document.createTextNode('Lee');
    span2.appendChild(lee);

    let name = document.getElementById('name');
    let age = document.getElementById('age');
    name.insertBefore(span1, age);
    age.parentNode.insertBefore(span2, age);

    console.log(age.parentNode); // <p id="name"><span>Prosper</span><span>Lee</span><i id="age">24</i></p>
</script>

在已有元素后插入一个新元素（新元素插入到目标元素的下一个兄弟元素之前）

已有元素.parentNode.insertBefore(新元素, 已有元素.nextSibling)

<body><span id="name">Prosper</span></body>
<script>
    let name = document.getElementById('name');
    let span = document.createElement('span');
    let lee = document.createTextNode('Lee');
    span.appendChild(lee);
    console.log(name.nextSibling); // #text
    name.parentNode.insertBefore(span, name.nextSibling);
</script>

accesskey

<a href="http://www.baidu.com/" accesskey="1">Alt + 1</a>

className

<span id="text">red</span>
<script>
    let text = document.getElementById('text');
    text.className = 'red';
    text.className += ' green';
    console.log(text); // <span id="text" class="red green">red</span>
</script>

Modernizr-检测浏览器支持情况

<head>
    <script src="http://modernizr.cn/downloads/modernizr-latest.js"></script>
</head>
<body>
    <script>
        console.log(Modernizr); // true or false object
    </script>
</body>

title

document.title = 'Lee'

table

<table border="1" width="500px">
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>


<script>
    let tbody = document.getElementById('tbody');
    console.log(tbody);
    tbody.insertRow(0);
    tbody.rows[0].insertCell(0);
    tbody.rows[0].cells[0].appendChild(document.createTextNode('Lee'));
    tbody.rows[0].insertCell(1);
    tbody.rows[0].cells[1].appendChild(document.createTextNode('24'));

    tbody.insertRow(1);
    tbody.rows[1].insertCell(0);
    tbody.rows[1].cells[0].appendChild(document.createTextNode('Prosper'));
    tbody.rows[1].insertCell(1);
    tbody.rows[1].cells[1].appendChild(document.createTextNode('23'));

    tbody.insertRow(0);
    tbody.rows[0].insertCell(0);
    tbody.rows[0].cells[0].appendChild(document.createTextNode('Tom'));
    tbody.rows[0].insertCell(1);
    tbody.rows[0].cells[1].appendChild(document.createTextNode('20'));
</script>

自定义数据属性

<div id="box" data-name="Lee"></div>
<script>
    console.log(document.getElementById('box').dataset.name);
</script>

滚动 scrollIntoView

<button onclick="scrollView()">滚动</button>
<div id="content" style="margin-top: 2000px;">
    文本。
</div>
<script>
    function scrollView() {
    
        var ele = document.getElementById("content");
        ele.scrollIntoView();
    }
</script>

contains

<div id="content"></div>
<script>
document.documentElement.contains(document.getElementById('content')) // true
document.documentElement.contains(document.getElementById('box')) // false
</script>
文章标签：
JavaScript
前端开发
关键词：
dom前端
前端dom
前端基础操作
dom基础操作
ProsperLee
目录
相关文章
龙大吉
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
龙大吉
40 5
石小石Orz
|
2月前
|
JavaScript 前端开发 编译器
吐血整理：纯前端如何实现批量dom转图片，并下载成压缩包
【10月更文挑战第2天】吐血整理：纯前端如何实现批量dom转图片，并下载成压缩包
石小石Orz
61 2
六卿
|
3月前
|
前端开发 JavaScript
前端基础(七)_DOM元素获取（getElementById、getElementsByTagName、getElementsByClassName、querySelector等）
本文介绍了如何在前端通过不同的方法获取DOM元素，包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll。
六卿
147 3
周一同学Zelina
|
3月前
|
XML 缓存 JavaScript
提升对前端的认知，不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM（文档对象模型）和BOM（浏览器对象模型）的重要性，并介绍了它们的相关操作和应用。
周一同学Zelina
62 0
提升对前端的认知，不得不了解Web API的DOM和BOM
六卿
|
3月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法，并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
六卿
52 0
前端基础(十)_Dom自定义属性(带案例)
半截诗
|
2月前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
半截诗
25 0
半截诗
|
2月前
|
JavaScript 前端开发 搜索推荐
【前端基础篇】JavaScript之DOM介绍1
【前端基础篇】JavaScript之DOM介绍
半截诗
37 0
杀死一只知更鸟debug
|
3月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网，轮播图及div+css布局，js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计，包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
杀死一只知更鸟debug
82 0
六卿
|
3月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas，结合jspdf实现下载pdf（下载截图下载前端dom元素）
本文介绍了在前端项目中，当使用`html2canvas`遇到问题时，如何使用`html-to-image`库作为替代方案，结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题，并提供了该库的使用示例代码。随后，详细介绍了`html-to-image`库的安装和使用方法，展示了如何将DOM元素转换为Canvas，再利用`jspdf`生成PDF文件。最后，文章通过示例代码说明了整个转换和下载的过程，并展示了效果截图。
六卿
163 0
游客fz577umxdejsg
|
4月前
|
JSON JavaScript 前端开发
JS的无限可能： 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能： 前端 精妙DOM技巧至Node.js的服务端
游客fz577umxdejsg
31 4

热门文章

最新文章

  • 1
    JQuery利用sort对DOM元素进行排序
  • 2
    DOM XSS Scanner - Find DOM based XSS Security Vulnerabilities
  • 3
    jquery 遍历dom元素
  • 4
    获取兼容的DOM子节点
  • 5
    节点操作,节点属性的操作及DOM event事件
  • 6
    DOM中的动态NodeList与静态NodeList
  • 7
    jQuery 对象和 DOM 对象
  • 8
    Dom4j SAXReader Constructors
  • 9
    Java_数据交换_dom4j_01_解析xml
  • 10
    jQuery对象与DOM对象之间的转换方法
  • 1
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    86
  • 2
    《跨界合作：前端与后端如何优化协作效率》
    82
  • 3
    使用Vue.js构建交互式前端的技术探索
    88
  • 4
    如何优化前端性能：关键步骤和技巧
    85
  • 5
    nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（前端部分）
    98
  • 6
    ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
    116
  • 7
    vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
    260
  • 8
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）
    70
  • 9
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（一）
    88
  • 10
    ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（二）
    135

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    DataWorks