WebAPI
- DOM : 一套操作网页内容的函数
- DOM 一般指文档对象模型。 文档对象模型(Document Object Model,简称 DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口(api)
- BOM : 一套操作浏览器窗口的函数
- Brower Object Model 缩写 BOM
- Web : DOM+BOM
- API : 预先定义的接口 ( 一般指函数 )
DOM
1. DOM 工作的流程
- 浏览器将硬盘中的代码读取到内存
- 编译器解析代码生成一颗 Dom 树
- DOM 树在内存中以对象的方式存储,称之为 DOM 对象(document)
- DOM 的工作原理就是在这个环节,通过 js 语法修改 DOM 对象,DOM 树变了,渲染的页面也变化
- 渲染引擎开始渲染 Dom 树生成页面
2. 节点
页面 ( DOM树 ) 主要由节点(node)组成 : 一切内容皆节点
- 元素节点(标签)
- 属性节点
- 文本节点
- 注释节点
实际业务中使用最多的是: 元素节点
3. Dom 网页动态操作
查
1. 查元素 ( 查询页面元素 )
根据 css 选择器获取 Dom 元素
-
获取一个元素
- 语法 :
document.querySelect( 'css选择器' )
得到的是 Dom 对象,可以直接对 Dom 修改。 - 选择器存在获取满足条件的第一个元素,选择器不存在获取 null
- 语法 :
-
获取多个元素
- 语法 :
document.querySelectAll( 'css选择器' )
得到的是一个伪数组,不能直接操作 - 获取满足条件的所有元素返回伪数组
{ '1':dom对象1,'2':dom对象2 }
,不能直接修改,需要通过下标取出DOM对象才可以操作
- 语法 :
-
根据id名获取 : 具有唯一性
- 语法 :
let btn = document.getElementById('btn')
得到的是 Dom 对象
- 语法 :
-
根据标签名获取
- 语法 :
let liList = document.getElementsByTagName('li')
得到的是一个伪数组
- 语法 :
-
根据类名获取
- 语法 :
boxList = document.getElementsByClassName('box')
得到的是一个伪数组
- 语法 :
-
根据 name 获取表单元素
- 语法 :
let genderList = document.getElementsByName('gender')
得到的是一个伪数组
- 语法 :
-
注意 : 伪数组 (有数组三要素:元素、下标、长度。 不能使用数组的方法)
2. 查内容 ( 元素内容操作 )
元素.innerText
: 获取文本( 包含 子元素文本 )- 设置的时候:无法解析字符换串中的标签
元素. innerHtml
: 获取文本+标签- 设置的时候:可以解析字符换串中的标签
3.查属性 ( 元素属性操作 )
- 普通元素
- href: a 标签链接
- src : img 标签路径
//修改a标签的href
document.querySelector('a').href = 'http://www.baidu.cn'
//修改img标签的src,页面的图片就会改变
document.querySelector('img').src = './images/02.jpg'
- 表单元素
- value : 表单值
- disabled : 是否禁用 布尔类型
- checked : 是否选中( radio 和 chekbox ) 布尔类型
- selected : 是否选中( 下拉菜单 ) 布尔类型
4.查样式
- style 操作
- 语法:
元素. style .样式名='属性值'
- 注意: 样式名有杠的在 Dom 语法中用驼峰命名
- 应用场景: 单个样式修改
- 语法:
document.querySelector('.box').style.width = '200px' // 修改宽度
document.querySelector('.box').style.backgroundColor = 'green' // 修改颜色
document.querySelector('.box').style.opacity = 0.5 // 修改透明度
- className 操作
- 语法 :
元素. className = '类名'
- 注意 :
- Dom操作类名不能只用class, class是js的关键字
- 会覆盖原先的类名
- 场景 : 由于只能操作一个类所以实际开发中很少使用
- 语法 :
<style>
.one{
margin: 20px auto;
}
.two{
border: 10px solid yellow;
}
</style>
<script>
/* 使用className会覆盖原先的类名 */
document.querySelector('.box').className = 'two'
</script>
- lassList 操作
- 语法 :
元素 . classList . add( '类名' )
追加类名 , 多个类名使用逗号隔开元素 . classList . remove( '类名' )
移出类名元素 . classList. toggle( '类名' )
切换类名
- 注意: 切换类名, 有则移除,无则追加
- 语法 :
//1 追加类名:
document.querySelector('.box').classList.add('two','three')
//2 移除类名:
document.querySelector('.box').classList.remove('one')
//3 切换类名:
document.querySelector('.box').classList.toggle('two')
- 注意点: 如果样式名有
-
,border- margin- font-
, 在 Dom 语法中都需要转成驼峰命名- 原因: 因为
-
不符合 js 命名规则 - 驼峰: 去掉
-
,-
后面的首字母大写margin-top : marginTop
- 原因: 因为
5. 查节点
- 1. 查找子节点
- 子节点 :
父元素.childNodes
( 包含标签、文本、注释 ) - 子元素节点 :
父元素.children
- 子节点 :
- 2. 查找兄弟元素节点
- 上一个兄弟元素 :
元素.previousElementSibling
- 下一个兄弟元素 :
元素.nextElementSibling
- 上一个兄弟元素 :
let box = document.querySelector('.box')
box.previousElementSibling.style.color = 'red' // 修改上一个元素的样式
box.nextElementSibling.style.color = 'red' // 修改下一元素的样式
- 3. 查找父元素节点
元素.parentNode
<body>
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
</ul>
<script>
let li2 = document.querySelector('#li2')
console.log(li2.parentNode)//ul
console.log(li2.parentNode.parentNode)//body
console.log(li2.parentNode.parentNode.parentNode)//html
console.log(li2.parentNode.parentNode.parentNode.parentNode)//document
console.log(li2.parentNode.parentNode.parentNode.parentNode.parentNode)//null
</script>
</body>
增
1. 新增节点
- (1)创建空节点:
document.createElement('标签')
- (2)设置内容
- (3)追加到页面
- 追加到最后面:
父元素.appendChild(子元素)
- 追加指定元素前面:
父元素.insertBefore(子元素,哪个元素的前面)
- 追加到最后面:
//1.在内存中创建空标签
//参数传 '标签名'
let li = document.createElement('li')
//2.设置内容
li.innerText = '我是新创建的li元素'
console.log(li)
//3.追加到页面 (默认创建元素只是在内存中,不会添加到DOM树,所以渲染引擎不渲染)
let ul = document.querySelector('ul')//获取父元素
//3.1 追加到最后面 父元素.appendChild(子元素)
// ul.appendChild(li)//追加到ul中
//3.2 追加到指定位置 父元素.insertBefore(子元素,要加到哪个元素的前面)
let li2 = document.querySelector('#li2')//班长2
ul.insertBefore(li, li2 )//li 追加到 li2的前面
2. 新增自定义属性
- attribute 语法作用: 操作元素自定义属性
- 元素标准属性: HTML 和 CSS 有的属性(W3C标准)
- 自定义属性: HTML 和 CSS 没有的属性, 自己添加的属性
- 自定义属性不会渲染样式的,只是起到存储作用
- attribute语法 :
- 添加属性:
元素.setAttribute('属性名',属性值)
- 获取属性:
元素.getAttribute('属性名')
- 移除属性:
元素.removeAttribute('属性名')
- 添加属性:
删
- 语法 :
父元素.removeChild(子元素)
克隆节点: 复制节点
- 语法 : 元素.cloneNode(布尔类型)
- false: 不克隆后代元素
- true: 克隆所有后代元素
let box = document.querySelector('.box')
let cloneBox = box.cloneNode(true)
//追加到body
document.body.appendChild(cloneBox)