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

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

2023-07-21 112
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
石小石Orz
|
1月前
|
JavaScript 前端开发 编译器
吐血整理：纯前端如何实现批量dom转图片，并下载成压缩包
【10月更文挑战第2天】吐血整理：纯前端如何实现批量dom转图片，并下载成压缩包
石小石Orz
47 2
六卿
|
2月前
|
前端开发 JavaScript
前端基础(七)_DOM元素获取（getElementById、getElementsByTagName、getElementsByClassName、querySelector等）
本文介绍了如何在前端通过不同的方法获取DOM元素，包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll。
六卿
91 3
周一同学Zelina
|
2月前
|
XML 缓存 JavaScript
提升对前端的认知，不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM（文档对象模型）和BOM（浏览器对象模型）的重要性，并介绍了它们的相关操作和应用。
周一同学Zelina
56 0
提升对前端的认知，不得不了解Web API的DOM和BOM
六卿
|
2月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法，并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
六卿
43 0
前端基础(十)_Dom自定义属性(带案例)
Hoshiᅟᅠ
|
1月前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
Hoshiᅟᅠ
22 0
Hoshiᅟᅠ
|
1月前
|
JavaScript 前端开发 搜索推荐
【前端基础篇】JavaScript之DOM介绍1
【前端基础篇】JavaScript之DOM介绍
Hoshiᅟᅠ
30 0
杀死一只知更鸟debug
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网，轮播图及div+css布局，js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计，包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
杀死一只知更鸟debug
72 0
六卿
|
2月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas，结合jspdf实现下载pdf（下载截图下载前端dom元素）
本文介绍了在前端项目中，当使用`html2canvas`遇到问题时，如何使用`html-to-image`库作为替代方案，结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题，并提供了该库的使用示例代码。随后，详细介绍了`html-to-image`库的安装和使用方法，展示了如何将DOM元素转换为Canvas，再利用`jspdf`生成PDF文件。最后，文章通过示例代码说明了整个转换和下载的过程，并展示了效果截图。
六卿
78 0
游客fz577umxdejsg
|
3月前
|
JSON JavaScript 前端开发
JS的无限可能： 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能： 前端 精妙DOM技巧至Node.js的服务端
游客fz577umxdejsg
28 4
土木林森
|
3月前
|
XML JavaScript 前端开发
哇塞！Web 前端惊现 DOM 元素神操作，一场惊心动魄的网页变革，你准备好了吗？
【8月更文挑战第23天】在Web前端开发中，熟练操作DOM元素至关重要。DOM作为一种编程接口，将HTML/XML文档表示为节点树，便于使用JavaScript访问及修改文档内容与结构。
土木林森
56 0

热门文章

最新文章

  • 1
    HTML DOM 教程Part1
  • 2
    JavaScript 技术篇-js获取dom节点、html标签自定义属性的值。
  • 3
    jquery 遍历dom元素
  • 4
    JQuery利用sort对DOM元素进行排序
  • 5
    DOM XSS Scanner - Find DOM based XSS Security Vulnerabilities
  • 6
    Dom4j应用总结
  • 7
    React中的Virtual DOM(看这一篇就够了)
  • 8
    获取兼容的DOM子节点
  • 9
    节点操作,节点属性的操作及DOM event事件
  • 10
    DOM中的动态NodeList与静态NodeList
  • 1
    告别‘老司机’时代，AJAX与Fetch API让你的前端与Python后端无缝对接！
    59
  • 2
    现代前端开发中的响应式设计原则与实践
    88
  • 3
    现代前端开发中的响应式设计实践与优化
    60
  • 4
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    133
  • 5
    前端项目部署问题总结
    61
  • 6
    前端框架与库 - React生命周期与Hooks
    48
  • 7
    前端性能优化都有那些方案 ？
    71
  • 8
    高级前端常见的面试题？
    99
  • 9
    前端框架与库 - React基础：组件、Props、State
    70
  • 10
    技术心得：前端点击按钮，导入excel文件，上传到后台，excel接收和更新数据
    49

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 前端开发基础3：CSS3常见显示属性
  • 语言入门-1：环境构建
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    阿里云OSS设置跨域访问