JS笔记整理 | 青训营笔记

JoJo1
107 阅读8分钟

这是我参与「第四届青训营 」笔记创作活动的第3天

DOM节点

1. 什么是DOM?

DOM Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改html文档的内容和结构。

image.png

2.Document对象

Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

3. DOM节点分类

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:
文档是一个文档节点。
所有的HTML元素都是元素节点。
所有HTML属性都是属性节点。
文本插入到HTML元素是文本节点。 注释是注释节点。

获取元素节点（很重要）

1.getElementById()

getElementById():通过标签的id属性获取元素

2.getElementsByTagName()

getElementsByTagName():通过标签名来获取元素

3.getElementsByName()

getElementsByName():通过标签的name属性获取元素

4.getElementsByClassName()

getElementsByClassName():通过标签的class属性来获取元素。有浏览器兼容性，主要是ie8以下

5.querySelector()

querySelector():通过css选择器来获取元素

6.querySelectorAll()

querySelectorAll():通过css选择器来获取元素

(其中2、3、4、6适用于数组。)

getElement和querySelector的区别

query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变． 在使用的时候getElement这种方法性能比较好，query选择符则比较方便。

  • 1.得到的元素不是需要很麻烦的多次getElementBy..的话，尽量使用getElementBy..,因为他快些。
  • 2.得到的元素需要很麻烦的多次getElementBy..组合才能得到的话使用querySelector，方便。
  • 3.看实际情况，你决定方便优先还是性能优先。

image.png 创建li元素，getElement创建元素，会造成死循环，而使用querySelecotor创建的li元素是可以的

image.png

创建页面元素（很重要）

  1. createElement()：创建元素节点
  2. createTextNode()：创建文本节点
  3. createAttribute()：创建属性

操作页面元素属性

1. 元素属性节点的操作

语法：
setAttribute('属性名','属性值')：给节点元素设置属性
getAttribute('属性名')：获取属性的值
removeAttribute('属性名')：删除属性

image.png

2. style属性的操作

style对象的cssText属性

image.png image.png

3. style属性其他方法的操作

style对象提供了三个方法来读写行内css规则：
setProperty(propertyName,value)：设置某个CSS属性。
getPropertyValue(propertyName)：读取某个CSS属性的值。
removeProperty(propertyName)：删除某个CSS属性。

image.png image.png

Node(节点)概述

DOM是文档对象模型的简称。它的基本思想是：
把结构化文档解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。
所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的（比如增删内容）。
node是DOM的最小组成单位，一个文档的树形结构就是由各种不同类型的节点组成。
对于HTML文档，node主要有以下六种类型：

image.png

Node的属性（重点）

通用属性

  1. nodeName：获取节点名称
  2. nodeType：获取节点类型

image.png

返回当前node的相关节点属性

  1. ownerDocument
    ownerDocument：返回当前节点元素的顶层对象-document
  2. nextSibling
    nextSibling:获取下一个兄弟节点元素
  3. previousSibling
    previousSibling:获取上一个兄弟节点元素

注意：nextSibling和previousSibling包括空格和换行节点

  1. parentNode和parentElement都是获取父节点元素

返回node内容属性

  1. innerHTML
    innerHTML：设置或者是返回html标签直接的内容
  2. innerText
    innerText：设置或者返回文本内容

image.png HTML标签不能解析，会原样输出。
3. textContent
textContent：设置或者返回文本内容。

返回当前node子节点相关属性

  1. firstChild
    firstChild:获取第一个子节点
  2. lastChild
    lastChild：获取最后一个子节点
  3. childNodes
    childNodes：获取子节点（数组）

总结说明：childNodes可以获取元素节点和文本节点。

image.png image.png image.png image.png 4. Children Children：获取子节点（数组）

总结说明：children只能获取元素节点，不能获取文本节点。

image.png image.png

Node的方法(重点)

节点的增删改查

  1. appendChild
    appendChild()：向后添加（追加）子节点
  2. cloneNode
    cloneNode()：克隆子节点
  3. insertBefore
    insertBefore()：向前添加子节点
  4. removeChild
    removeChild()：删除子节点
  5. replaceChild
    replaceChild()：修改子节点

节点的判断

  1. hasChildNodes():判断是否有子节点（返回值为true/false）
    注意：空白节点也是子节点
  2. contains()：判断是否包含指定的子节点（返回值为true/false）
  3. isEqualNode():判断两个节点是否相等

HTML元素操作方法

1. 元素位置相关属性

offsetParent属性：获取当前节点的css是position的值是absolute(绝对),relative(相对的)的父元素节点。

2. offsetTop属性和offsetLeft属性

offsetTop属性：获取当前节点距离父元素的顶部距离。
offsetLeft属性：获取当前节点距离父元素的左侧距离。

3. 元素的高度和宽度

offsetWidth       //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
offsetHeight      //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
clientWidth        //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
clientHeight       //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
offset和client的区别
offset指偏移，包括这个元素在文档中占用的所有显示宽度，包括滚动条、padding、border，不包括overflow隐藏的部分；client指元素本身的可视内容，不包括overflow被折叠起来的部分，不包括滚动条、border，包括padding。

BOM的概念

  1. 什么是BOM?
    BOM：Browser Object Model 是浏览器对象模型，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象也是核心对象，其他对象都是该对象的子对象。
  2. BOM包含哪些内容？
  • window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性。
  • document 对象，文档对象；
  • location 对象，浏览器当前URL信息；
  • navigator 对象，浏览器本身信息；
  • screen 对象，客户端屏幕信息；
  • history 对象，浏览器访问历史信息；
    在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
     所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
    全局变量是 window 对象的属性。
    全局函数是 window 对象的方法。
  1. BOM和DOM的关系
  • DOM通过document对象来访问、控制、修改html和xhtml等文档中的内容
  • BOM通过window对象来访问、控制、修改浏览器中的内容
    联系：BOM包含DOM
    区别：DOM描述了处理网页内容的方法和接口，即操作页面内部
    BOM描述了与浏览器进行交互的方法和接口，即操作页面之间

image.png

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
因为window对象是js中的顶级对象，因此所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。
例如：
打开窗口 window.open(url); //等价于open(url)
关闭窗口 window.close(); //等价于close()
获取事件 window.event //等价于event
获取文档 window.document //等价于document

window对象中常用的属性

  1. window.name
    属性：
    window.name是window对象的一个属性，默认值为空。
    特性：
    window.name值在不同的页面（甚至不同域名）加载后依旧存在,并且可以支持非常长的name值（2MB左右）
  2. 浏览器距离屏幕的距离
    window.screenX
    window.screenY
  3. window尺寸属性
    outerHeight属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。
    outerWidth属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动条）。
    innerheight 返回窗口的文档显示区的高度。
    innerwidth 返回窗口的文档显示区的宽度。
  4. window.navigator对象
    window.navigator对象包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用。（这个对象和event一样是一个全局变量，并且是唯一的）
    navigator.appCodeName //浏览器代码名的字符串表示
    navigator.appName //官方浏览器名的字符串表示
    navigator.appVersion //浏览器版本信息的字符串表示
    navigator.userAgent //返回和浏览器内核相关的信息
    navigator.cookieEnabled //如果启用cookie返回true，否则返回false
    navigator.javaEnabled() //如果启用java返回true，否则返回false
    navigator.platform //浏览器所在计算机平台的字符串表示
    navigator.plugins //安装在浏览器中的插件数组
    ps:如果window.navigator.userAgent出现了Mobile，可以确定用户使用的是移动设备。
  5. Location 对象
  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 （80 或 443）
  • location.protocol 返回所使用的 web 协议（http: 或 https:）
  • search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）
avatar
文章
阅读
粉丝