day03-DOM-节点操作

webApi

day03-DOM-节点操作

目标: 掌握节点(标签)的增删改查，具备编写微博发布案例的能力

节点操作

本质上针对标签本身的增删查

总结: 有明确的亲戚关系的时候, 使用查语法更加方便一些

查

针对的找亲戚返回的都是对象

父级: parentNode

子集: children

伪数组

####### 遍历

兄弟

nextElementSibling

previousElementSibling

节点-增

创建新节点

let result = document.createElement(标签名称)

追加节点

parent.appendChild(child)

将child的元素添加到parent元素里面去(最后面)

parent.insertBofore(child, refChild)

将child元素添加到refChild的前面去

如果refChild元素获取不到, 会默认以appendChild形式添加

追加的节点可以是新创建的 也可以是页面上已经存在 (移动)

克隆节点

模板元素.cloneNode(布尔值)

false: 浅拷贝

true: 深拷贝

用于需要创建一个复杂的标签

####### 前提: 页面上有一个模板节点

删除节点

parent.removeChild(child)

案例：

表格渲染案例

学成在线渲染案例

改为节操操作的模式重构一遍

日期对象

1. 获取日期对象

new Date()

2. 获取日期对象的每一个部分

getFullYear()

getMonth() + 1

getDate()

getHours()

getMinutes()

getSeconds()

3. 补0函数的制作

将小于10的数值连上一个字符串的0

综合案例： 倒计时

综合案例-微博发布案例

需求1

1. 注册input事件

2. 将文本的内容的长度赋值给对应的数值

3. 表单的maxlength属性可以直接限制在200个数之间

需求2

克隆预定义好的模板,将模板的hidden属性设置为false, 并最终展示到页面上

判断如果内容为空，则提示不能输入为空, 并且直接return

防止输入无意义空格, 使用字符串.trim()去掉首尾空格, 并将表单的value值设置为空字符串

需求3

获取文本域的内容, 赋值给由模板克隆出来的新标签里面的content.innerText

随机获取数据数组里面的内容, 替换newNode的图片和名称

Math.random()* (n + 1)

利用时间对象将时间动态化

需求4

在事件处理函数里面获取点击按钮,注册点击事件

(易错点: 必须在事件里面获取,外面获取不到)

删除对应的元素 (通过this获取对应的那条需要删除的元素)

需求5

将表单域内容重置为空

将userCount里面的内容重置为0

面试题

重绘和回流