JavaScript DOM编程艺术(第2版)学习笔记1(1~4章)

Stella981
• 阅读 542

第一章 一些基本概念

HTML(超文本标记语言),构建网页的静态结构,由一系列的DOM组成;

CSS(层叠样式表),给网页各部分结构添加样式;

JavaScript,通过获取DOM给静态结构加上动作,使用户能够与静态网页进行交互;

DOM,一种API(应用程序接口),通过这个接口动态的访问和修改结构或样式。

浏览器内核,即渲染引擎(rendering engine),造成不同浏览器之间存在兼容问题。渲染引擎负责对html和js文档进行解释并决定浏览器如何显示网页内容及样式。目前常用的几种浏览器引擎,Safari&chrome--WebKit,firefox--Gecko,IE--Trident。

第二章 Javascript语法

html的基本结构:

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="utf-8"/>  <title></title></head>
<body></body>
</html>

js代码必须通过html实现,有两种方法:

1,把代码放在head中的script标签内

2,把代码单独存为js文件,在script标签中引用js文件路径,script标签可以放在head或body中,放在body中效率更高

由于之前学过廖雪峰的JavaScript基础教程,本书的第二章只是简单的回顾。

第三、四章 操作DOM的方法和属性

1,节点分为三种,元素节点,文本节点,属性节点,文本节点和属性节点包含在元素节点中

2,css负责给各元素添加样式,为了精准的定位到唯一的元素,给元素添加class属性或id属性。

class属性可以应用到多个元素上,css中用 .class名 给一类元素添加样式;

id属性只能应用到唯一元素上,css中用 #id名 给唯一的元素添加样式;

3,获取元素的方法,属于document对象

getElementById;getElementsByClassName;getElementsByTagName

id对应唯一的元素,所以方法为单数element;class和tag对应多个元素,所以方法为复数elements

使用方法: 

    var test=document.getElementById('id名'); 返回元素节点,每个元素节点都是一个对象,所以返回的数据类型为对象

    tag和class方法可以用for循环遍历一组元素

4,获取和设置元素的属性,属于元素节点对象

获取属性getAttribute,一个参数,需要获取的属性名。

设置属性setAttribute,两个参数,需要修改的属性名,修改后的值。

注意:1)当属性不存在时,先创建属性,再给属性赋值

           2)通过setAttribute修改属性值后,在浏览器中查看源代码时仍显示修改前的值,这是由于DOM的工作模式,先静态加载页面结构再动态刷新,动态刷新不影响静态结构,不在浏览器里刷新页面提高网页打开的速度

5,一些常用的元素节点对象的属性

childNodes,获取某一元素的全部子节点

注意:返回的是数组,但不能用length获取该节点子元素的个数,因为childNodes返回的不只有元素节点,所有的节点都计算在内

两种简化写法:

firstChild,等价于childNodes[0],第一个元素

lastChild,等价于childNodes[childNodes.length-1],最后一个元素

nodeType,返回数字判断节点的类型,元素节点1;属性节点2;文本节点3

nodeValue,获取节点的值

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
2年前
Javascript基础知识学习(三)
前言:javascript是一种轻量的、动态的脚本语言,我们为什么要使用javascript?对于一个网页的设计,.html用来放置网页的内容,.css则用来设计网页的样式和布局,那么.js它主要是使网页能够产生交互,意思就是能够通过代码动态的修改HTML、操作CSS、响应事件、获取用户计算机的相关信息等。javascript不是所有的浏览器
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
小万哥 小万哥
3星期前
DOM(文档对象模型):理解网页结构与内容操作的关键技术
DOM(文档对象模型)定义了一种访问和操作文档的标准。它是一个平台和语言无关的接口,允许程序和脚本动态访问和更新文档的内容、结构和样式。HTMLDOM用于操作HTML文档,而XMLDOM用于操作XML文档。HTMLDOM示例通过ID获取并修改HTML元素的