js
This commit is contained in:
parent
19ba3b009e
commit
6fb32aa856
@ -120,3 +120,23 @@ replaceChild()
|
|||||||
> nodeValue 内容
|
> nodeValue 内容
|
||||||
>
|
>
|
||||||
> parentNode Element
|
> parentNode Element
|
||||||
|
>
|
||||||
|
> 没有字节点
|
||||||
|
|
||||||
|
> 可以使用 nodeValue 或者 data 访问 修改
|
||||||
|
|
||||||
|
- appendData()
|
||||||
|
- deleteData()
|
||||||
|
- replaceData()
|
||||||
|
- spitText()
|
||||||
|
- substringData()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 合并文本节点 (规范化)
|
||||||
|
|
||||||
|
normalize()
|
||||||
|
|
||||||
|
#### 拆分文本节点
|
||||||
|
|
||||||
|
splitText()
|
44
javascript/13.dom编程.md
Normal file
44
javascript/13.dom编程.md
Normal 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%"
|
||||||
|
.....
|
||||||
|
// 自己操作
|
||||||
|
|
||||||
|
```
|
||||||
|
|
21
javascript/14.元素遍历.md
Normal file
21
javascript/14.元素遍历.md
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
# 元素遍历
|
||||||
|
|
||||||
|
## 子元素数量
|
||||||
|
|
||||||
|
> childElementCount
|
||||||
|
|
||||||
|
## 指向第一个Elemnet类型的子元素
|
||||||
|
|
||||||
|
> firstElementChild
|
||||||
|
|
||||||
|
## 指向最后一个element类型的子元素
|
||||||
|
|
||||||
|
> lastElementChild
|
||||||
|
|
||||||
|
## 指向前一个element类型的同胞元素 (同级)
|
||||||
|
|
||||||
|
> previousElementSibling
|
||||||
|
|
||||||
|
## 指向后一个Element类型的 同胞元素
|
||||||
|
|
||||||
|
> nextElementSibling
|
15
javascript/15.class操作.md
Normal file
15
javascript/15.class操作.md
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
# css操作
|
||||||
|
|
||||||
|
## className
|
||||||
|
|
||||||
|
获取标签的class 也可以用于修改
|
||||||
|
|
||||||
|
## classList
|
||||||
|
|
||||||
|
html5 新增
|
||||||
|
|
||||||
|
- add 添加
|
||||||
|
- contains 判断是否存在
|
||||||
|
- remove 删除
|
||||||
|
- toggle 存在就删除 不存在就添加
|
||||||
|
|
20
javascript/16插入标记.md
Normal file
20
javascript/16插入标记.md
Normal 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 |
20
javascript/17style操作.md
Normal file
20
javascript/17style操作.md
Normal 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)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user