JavaScript学习Day11笔记

最新推荐文章于 2024-07-14 16:01:12 发布

怒锤狗男人

最新推荐文章于 2024-07-14 16:01:12 发布

阅读量82

点赞数 3

分类专栏：二阶段文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_57479061/article/details/117451859

版权

二阶段专栏收录该内容

33 篇文章 1 订阅

订阅专栏

Day11笔记

一、什么是DOM

DOM是Document Object Model（文档对象模型）的缩写，是W3C（万维网联盟）的标准。
它允许程序和脚本动态地方位和更新文档的内容、结构和样式。
在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。

二、DOM节点类型

整个文档时一个文档节点 => docunment节点。
根节点：<html>。
每个HTML元素是元素节点。
HTML元素内的文本是文本节点
注释是注释节点

三、DOM节点信息

	nodeName	nodeType	nodeValue
元素节点	标签名	1	null
文本节点	#text	3	文本内容

在DOM中，每一个元素节点都被看成一个对象，既然是对象，那肯定有相关的属性和方法。
childNodes => 获取所有子节点
html中换行会产生内容为空的文本节点

四、获取节点方式

document系列

document.documentElement => 获取html（根节点）
document.body => 获取body节点
document.head => 获取head节点

getElement系列

document.getElementById(‘id属性值’)
document.getElementsByTagName(‘标签名’)
document.getElementsByClassName(‘class属性值’)
document.getElementsByName(‘name属性值’)

注：此方法获取的是动态节点（通过DOM添加的节点也可获取）。

querySelector系列

document.querySelector(’#id属性值’) => 返回该id属性的节点
document.querySelectorAll(’.class属性值’) => 返回所有该class属性的节点（数组）
document.querySelector(‘标签名’) => 返回第一个这个标签节点
document.querySelector(‘标签名.class属性值’) => 获取第一个class属性值的标签节点
document.querySelector(‘标签名[属性]’) => 获取第一个含有相同属性的标签节点
document.querySelectorAll(‘标签名’) => 返回所有这个标签节点（数组）
document => 可以换成nodeEle将会缩小获取节点的范围
标签名 => 遵循css写法
ul>li => 也可以用class和id的写法
:nth-child(n)
:not(:nth-child(n))

注：此方法只能获取静态节点（无法获取通过DOM添加的节点）。

Element系列

属性名称	描述
nodeEle.parentNode	返回该节点的父节点
nodeEle.childNodes	返回该节点的所有子节点（数组）
nodeEle.firstChild	返回该节点的第一个子节点（换行是空的文本节点）
nodeEle.lastChild	返回该节点的最后一个子节点（换行是空的文本节点）
nodeEle.nextSibling	返回该节点的下一个节点（换行是空的文本节点）
nodeEle.previousSibling	返回该节点的上一个节点（换行是空的文本节点）
nodeEle.firstElementChild	返回该节点的第一个子节点（无视换行产生的空文本节点）
nodeEle.lastElementChild	返回该节点的最后一个节点（无视换行产生的空文本节点）
nodeEle.nextElementSibling	返回该节点的下一个节点（无视换行产生的空文本节点）
nodeEle.previousElementSibling	返回该节点的上一个节点（无视换行产生的空文本节点）

五、操作元素内容

// innerHTML属性声明了元素含有的HTML文本，不包括元素本身的开始标记和结束标记。设置该属性可以用于为指定的HTML文本替换元素的内容。
p.innerHTML = '<h1>Html内容</h1>'

//innerText属性与inerHTML属性的功能类似，只是该属性只能声明元素包含的文本内容。即使指定的是HTML文本，它也会认为是普通文本而原样输出。
p.innerText = '纯文本内容'

// value只用于input表单。
p.value = '表单内容'

怒锤狗男人

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习Day11笔记

Day11笔记一、什么是DOMDOM是Document Object Model（文档对象模型）的缩写，是W3C（万维网联盟）的标准。它允许程序和脚本动态地方位和更新文档的内容、结构和样式。在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。二、DOM节点类型整个文档时一个文档节点 => docunment节点。根节点：<html>。每个HTML元素是元素节点。HTML元素内的文本是文本节点注释是注
复制链接

扫一扫