This commit is contained in:
luyuan 2020-12-24 09:35:58 +08:00
parent 19ba3b009e
commit 6fb32aa856
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
8 changed files with 141 additions and 1 deletions

View File

@ -120,3 +120,23 @@ replaceChild()
> nodeValue 内容
>
> parentNode Element
>
> 没有字节点
> 可以使用 nodeValue 或者 data 访问 修改
- appendData()
- deleteData()
- replaceData()
- spitText()
- substringData()
#### 合并文本节点 (规范化)
normalize()
#### 拆分文本节点
splitText()

View File

@ -0,0 +1,44 @@
# dom编程
## 动态脚本
```javascript
// 创建script节点
var script = document.createElement("script")
// 设置src属性
script.src = "foo.js"
// 添加到body最后面
document.body.appendChild(script)
```
```javascript
var script = document.createElement("script")
script.appendChild(document.createTextNode("function hi(){alert('hi')};hi()"))
document.body.appendChild(script)
```
>.text
## 动态样式
```javascript
var style = document.createElement("style")
style.type = "text/css"
style.appendChild(document.createTextNode("body{background-color: red}"))
var head = document.getElementsByTagName("head")[0]
head.appendChild(style)
```
> styleSheet.cssText
## 操作表格
```javascript
var table = document.createElement("table")
table.border = 1
table.width="100%"
.....
// 自己操作
```

View File

@ -0,0 +1,21 @@
# 元素遍历
## 子元素数量
> childElementCount
## 指向第一个Elemnet类型的子元素
> firstElementChild
## 指向最后一个element类型的子元素
> lastElementChild
## 指向前一个element类型的同胞元素 (同级)
> previousElementSibling
## 指向后一个Element类型的 同胞元素
> nextElementSibling

View File

@ -0,0 +1,15 @@
# css操作
## className
获取标签的class 也可以用于修改
## classList
html5 新增
- add 添加
- contains 判断是否存在
- remove 删除
- toggle 存在就删除 不存在就添加

View File

@ -0,0 +1,20 @@
# 插入标记
## innerHTMl
返回元素的html字符串 也可以修改html内容 会自动解析成dom元素 并且替换之前的内容
## outerHTML
跟innerHTML差不多 但是会包含选择的标签
## insertAdjacentHTML
- berforebegin 当前元素前面 同胞节点
- afterbegin 当前元素内 开头
- beforeend 当前元素内 末尾
- afterend 当前元素后免 下一个同胞节点
## insertAdjacentText()
文本节点 与上面一样

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -0,0 +1,20 @@
# style
大多命名都是能转换的 只有float 是cssFloat
el.style.css = value
## 扩展
- cssText style css代码
- length css数量
- getPropertyCSSValue 判断是否使用important
- getPropertyValue 返回查询属性的值
- item 返回索引的css属性名
- removeProperty 删除css属性
- setProperty 设置css属性
## 元素尺寸
![jacascript 偏移量offset、客户区client - 快乐锁- 博客园](17style操作.assets/1067628-20170420000550759-576494200.jpg)