1、梳理知识点
window对象: location....
window对象方法 :
定时器 :
document对象 :
document.getElementsByTagName() 集合
document.querySelector("#box") .box div
document.body document.documentElement
操作页面元素 :
操作样式
className = "类名"
操作属性
操作内容
innerHTML / innerText
value
location : 页面跳转 location.href
2、dom document object model (DOM 文档对象模型)
html是dom结构的根节点
html元素是 元素节点
元素的属性叫做 属性节点
元素的内容叫做 文本节点
一切都是节点
节点关系 (了解):
parentNode 父节点
children 孩子节点
childNodes 孩子节点 childNodes 会将换行识别成文本节点
firstElementChild 第一个孩子节点
lastElementChild 最后一个孩子节点
nextElementSibling 下一个兄弟节点
previousElementSibling 前一个兄弟节点
节点类型 : nodeType
只有三种情况
元素节点 1
文本节点 3
属性节点 2
tagName 或 nodeName 获取查找到的元素的标签名
3、节点的动态操作(重点) 创建 添加 删除
1、动态创建节点
document.createElement("标签名")
document.createTextNode() 创建文本节点 (了解)
2、动态添加节点
appendChild() 用法 : 父元素.appendChild( 要添加的子元素 )
一定是父子关系,且默认往后追加
insertBefore() 用法 : 父元素.insertBefore( 要添加的子元素 , 参照节点 )
将要添加的子元素 添加 到参照节点的前面,如果参照节点是null 则和appendChild效果相同
3、删除
removeChild()
父元素.removeChild( 要删除的子元素 )
remove()
要删除的元素.remove()
4、节点克隆
cloneNode( true )
没有参数,表示只克隆元素本身 如果参数为true,即克隆元素本身,又克隆元素的内容
5、节点属性的操作
getAttribute() 获取元素的属性值 (包含自定义属性)
setAttribute() 设置元素的属性 (为某个元素添加新的属性) (了解)
️我还很喜欢你、就像sin²x+cos²x始终如一