《JavaScript DOM 编程艺术》读书笔记

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量367 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 读书笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flywaterfree/article/details/51690003
版权

《JavaScript DOM 编程艺术》读书笔记——其五

第七章

1、innerHTML属性

使用innerHTML属性，可以把JavaScript代码从标记中分离出来，即不用在标记的<body>部分插入<script>标签。
举例：
（1）test.html:
    <div id="testdiv">
       <p>This is <em>my</em> content.</p>
    </div>
    test.js:
    //显示id值为testdiv的innerHTML属性值
    //即显示：<p>This is <em>my</em> content.</p>
    window.onload = function()
    {
      var testdiv = document.getElementById("testdiv");
      alert(testdiv.innerHTML);
    }
 innerHTML属性无细节，要想获得细节，要使用DOM方法和属性
（2）test.html:
    <div id="testdiv">
    </div>
    test.js:
    window.onload = function()
    {
      var testdiv = document.getElementById("testdiv");
      testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>";
     }    
 使用innerHTML属性后，testdiv元素内的HTML内容均被替换。

2、DOM方法

（1）createElement方法：创建一个新元素节点。
    举例：
    var para = document.createElement("p");
    注：此时创建的p元素虽然已经存在，但它并非任何一个DOM节点树的组成部分，只是游荡在JS里的文档碎片，还无法显示在浏览器的窗口画面里。不过它已有了自己的DOM属性（一个nodeType和一个nodeName值）。
（2）appendChild方法：使新创建的节点元素成为要插入的节点元素的一个子节点。
    举例：
    var testdiv = document,getElementById("testdiv");
    testdiv.appendChild(para);
    注：此时的p元素现已成为testdiv元素的一个子节点，被插入到test.html文档的节点树中。
（3）createTextNode方法：创建一个文本节点。
    举例：
    var txt = document.createTextNode("Hello world!");
    para.appendChild(txt);
 完整代码举例（为testdiv元素插入一段文本）：
 window.onload = function()
 {
    var para = document.createElement("p");
    var testdiv = document,getElementById("testdiv");
    testdiv.appendChild(para);
    var txt = document.createTextNode("Hello world!");
    para.appendChild(txt);
 }
（4）insertBefore方法：把一个新元素插入到一个现有元素的前面。
    举例：
    var gallery = document.getElementById("imagegallery");
    gallery.parentNode.insertBefore(placeholder,gallery);
    gallery.parentNode.insertBefore(description,gallery);
    注：此例效果为JS图片库中图片（placeholder）与介绍文本段（description）插在图片清单（imagegallery）之前。
（5）在现有元素后插入一个新元素：编写insertAfter函数并使用。

3、JavaScript图片库二次改进版：

test.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <link rel="stylesheet" href="../css/JavaScript_DOM_编程艺术_test.css" media="screen" />
    </head>
    <body>
        <h1>Snapshots</h1>
        <ul id="imagegallery">
            <li>
                <a href="../img/1.jpeg" title="picture01"><img src="../img/1.jpeg" alt="Breakfast" width="120px" height="90px" /></a>
            </li>
            <li>
                <a href="../img/2.jpeg" title="picture02"><img src="../img/2.jpeg" alt="Sea" width="120px" height="90px" /></a>
            </li>
            <li>
                <a href="../img/3.jpeg" title="picture03"><img src="../img/3.jpeg" alt="Flower" width="120px" height="90px" /></a>
            </li>
            <li>
                <a href="../img/4.jpeg" title="picture04"><img src="../img/4.jpeg" alt="Tree" width="120px" height="90px" /></a>
            </li>
            <li>
                <a href="../img/5.jpg" title="picture05"><img src="../img/5.jpg" alt="Street" width="120px" height="90px" /></a>
            </li>
            <li>
                <a href="../img/6.jpeg" title="picture06"><img src="../img/6.jpeg" alt="Sky" width="120px" height="90px" /></a>
            </li>
        </ul>
        <script type="text/javascript" src="../js/JavaScript_DOM_编程艺术_test.js"></script>
    </body>
</html>

test.js:

function addLoadEvent(func)
{
    var oldonload = window.onload;
    if(typeof window.onload != 'function')
    {
        window.onload = func;
    }
    else
    {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
function prepareGallery()
{
    if(!document.getElementsByTagName)
    {
        return false;
    }
    if(!document.getElementById)
    {
        return false;
    }
    if(!document.getElementById("imagegallery"))
    {
        return false;
    }
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for(var i = 0 ; i < links.length ; i++)
    {
        links[i].onclick = function()
        {
            showPic(this);
            return !showPic(this);
        }
    }
}
function showPic(whichpic)
{
    if(!document.getElementById("placeholder"))
    {
        return false;
    }
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    if(document.getElementById("description"))
    {
        var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;
    }
    return true;
}
//两个参数分别为将被插入的元素与目标元素
function insertAfter(newElement,targetElement)
{
    var parent = targetElement.parentNode;//将目标元素的parentNode属性值保存在变量里
    if(parent.lastChild == targetElement)//检查目标元素是否为parent最后一个子元素
    {
        parent.appendChild(Element);//是，则把新元素插入到parent上
    }
    else//不是，则把新元素插入到目标元素与目标元素的下一个兄弟元素之间
    {       parent.insertBefore(newElement,targetElement.nextSibling);
    }
}
function preparePlaceholder()
{
    if(!document.createElement)
    {
        return false;
    }
    if(!document.createTextNode)
    {
        return false;
    }
    if(!document.getElementById)
    {
        return false;
    }
    if(!document.getElementById("imagegallery"))
    {
        return false;
    }   
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id","placeholder");
    placeholder.setAttribute("src","../img/2.jpeg");
    placeholder.setAttribute("alt","my image gallery");
    placeholder.setAttribute("style","width: 50%; height: 20%; margin-top: 20px;");
    var description = document.createElement("p");
    description.setAttribute("id","description");
    var desctext = document.createTextNode("Choose an image.");
    description.appendChild(desctext);
    var gallery = document.getElementById("imagegallery");
    insertAfter(placeholder,gallery);
    insertAfter(description,placeholder);
}

test.css:

body
{
    font-family:"Helvetica","Arial",serif;
    color: #333333;
    background-color: lightgoldenrodyellow;
    margin: 1em 10%;
}
h1
{
    color: #333333;
    background-color: transparent;
}
a
{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}
ul
{
    padding: 0;
}
li
{
    float: left;
    padding: 1em;
    list-style: none;
}
#imagegallery
{
    list-style: none;
}
#imagegallery li
{
    display: inline;
}
#imagegallery li a img
{
    border: 0;
}

4、JavaScript图片库截图：
这里写图片描述

风醉流觞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初读JavaScript DOM编程艺术（一）
weixin_48846877的博客
11-16 297
JavaScript DOM编程艺术--前三章概念总结一. 概述1.什么是JavaScript2.什么是DOM二. JavaScript 语法1. 语句和注释2. 变量和数组三. DOM 一. 概述 1.什么是JavaScript ● JavaScript是一种脚本语言。JavaScript提供了操控Web浏览器的手段，使得Web浏览器的交互性得到提升。 ● JavaScript是解释型程序设计语言，代码中的错误只能等到解释器执行到有关代码时才能发现。 2.什么是DOM ● DOM是一套对文档的内容进行抽象
《JavaScript DOM 编程艺术》（第2版）之读后感悟
fcdd123的专栏
01-26 631
在阅读完第一本书——《JavaScript DOM编程艺术》之后，有一些自己的感悟和理解，顺带把书中的一些常用的原生JS所写的方法罗列出来，以供参考和使用。
高性能Javascript 读书笔记
今晚打老斧的博客
11-30 438
最近看了《高性能JavaScript》一书，里面有讲很多提高js性能的书，所以根据个人见解记下一些我觉得有用的有意思的点，供以后学习参考。 前言：尽管现在已经发展出了各种方法，压缩，合并、模块化等加载方式，以及强大的JS处理引擎提高js性能，但仍有一些javascript引擎力不能及的地方：DOM交互、网络延迟、JavaScript的阻塞和并发下载等。
《Javascript DOM编程艺术》读书笔记
SuperMMa
08-26 521
最近在学习javascript，于是知乎大神告诉我基础可以先看一下《javascript DOM编程艺术》，说实话，我的水平是知道getElementById，getElementsByTagName之类的，但是并不知道DOM为何方神圣。所以，去看了一下 ，主要讲的就是 getElementById，getElementsByTagName，是真真真基础，如果什么都不会，我建议可以去看一下啊，那么
读JavaScript DOM编程艺术笔记
10-28
读JavaScript DOM编程艺术笔记，需要的朋友可以参考下。
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
10-24
主要介绍了《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法,需要的朋友可以参考下
《JavaScript DOM 编程艺术》读书笔记之DOM基础
12-12
《JavaScript DOM 编程艺术》是一本深入探讨DOM（Document Object Model）的书籍，DOM是网页内容的结构化表示，允许我们用JavaScript与HTML或XML文档进行交互。在这篇文章中，我们将聚焦DOM的基础知识，包括节点类型...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 345
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 378
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 169
vue 自定义滚动条同步拖动（移动端）
Webkit简介以及工作流程
读心悦
07-10 332
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 692
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 317
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 204
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 483
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
TS类型声明文件（二）如何在 TS 中导入导出局部类型
weixin_43303603的博客
07-10 262
系列文章之：如何在 TypeScript 中导入导出局部类型
js中scrollIntoView第一次不生效，第二次生效
风如也的博客
07-12 165
方法用于将元素滚动到可视区域。如果在页面加载后立即使用，可能不会生效，因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成，可以在。关键是确保在页面完全加载和渲染之后再调用。
基于JAVA+SpringBoot+Vue+Echarts的充电数据大屏可视化分析
azhou的代码园
07-12 603
随着电动汽车的普及，城市中充电设施的需求日益增长。为了提高充电设施的管理效率和用户体验，本文提出了一个停车场充电桩数据可视化平台的设计与实现。该平台旨在集成、处理并展示来自多个充电桩的实时数据，帮助管理者进行有效监控和决策支持，同时为车主提供便捷、直观的充电信息查询服务。首先，本研究分析了现代停车场充电桩管理的业务需求，确定了平台的主要功能模块，包括管理员登录，数据源excel导入、数据清洗、大屏数据展示、以及不同维度数据分析图表展示等。
javascriptdom编程艺术pdf
10-23
《JavaScript DOM编程艺术》是由Jeremy Keith和Jeffrey Sambells合著的一本JavaScript编程指南。该书详细介绍了使用JavaScript与HTML文档对象模型（DOM）交互的技术和方法。 DOM是网页中使用的一个重要的API，它将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值