187862894761.操作元素内容
1.1 innerHTML:获取元素内部的HTML结构
1.2 innertext:获取内部的文本(无法获取html结构)
2.移动小方块案例:
3. 操作属性
第一步获取属性值
var 属性值 = getAttribute(属性名)
dierb 设置属性
setAttribute(属性名,属性值)
列如:
4.操作事件
事件的另外一种写法
第一步 绑定事件, 属性事件
第二步 绑定事件,赋值式
5.制作选项卡
6.DOM节点
从dom角度每个html标签元素都被看作节点(对象),标签元素的内容属性也被看作节点。
节点分类:
标签元素称为: 元素节点
标签内容称为: 文本节点
标签属性称为: 属性节点
整个html文档称为: 文档节点<->document
- 节点树形结构
- 元素节点之间有空白的文本节点
- 节点间层次关系
父节点
子节点
兄弟节点
- 获取节点
getElement系列 -> 元素节点
querySelector系列 -> 元素节点
层次结构获取节点
文本节点: #text
childNodes 所有子节点
parentNode 父节点
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点
previousElementSibling 上一个元素兄弟节点
nextElementSibling 下一个元素兄弟节点
parentElement <==> parentNode
children 子元素节点
firstElementChild
lastElementChild
- 非常规节点
body document.body
head document.head
html document.docuemntElement