-
Notifications
You must be signed in to change notification settings - Fork 0
/
learning.html
134 lines (112 loc) · 5.16 KB
/
learning.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<script>
Web,API是浏览器一套操作的浏览器功能(BOM)和页面元素(DOM)的API
文档对象模型DOM(document object model): 获取元素 修改元素尺寸 添加元素
标准编程接口
浏览器对象模型BOM(browser object model): 获取窗口尺寸 历史记录管理 获取滚动条位置
以下内容看作对象
文档: document
元素: 标签 element
节点: 所有内容(标签属性文本注释) node
DOM方法
自定义属性
有些数据只需保存在页面,不用存入数据库
data-开头
获取属性值
var div = document.querySelector('div');
1.element.属性 内置属性
div.id; //返回id名
2.element.getAttribute('属性') 自定义属性index="1"
div.getAttribute('id')
3.新增element.dataset 集合所有data开头的属性
div.dataset.index
div.dataset['index']
div.dataset.liName //data-li-name 驼峰命名法
修改元素属性值
1.element.属性='值'
div.id='test';
div.className='navs';
2.element.setAttribute('属性名','值')
div.setAttribute('index','2');
div.setAttribute('class','header');
移除属性
1.element.removeAttribute('属性名')
div.removeAttribute('index');
var temp = document.getElementById('标签 必须是字符串');
返回的是一个元素对象
console.dir('打印返回的元素对象 更好的查看元素和方法');
获取页面中所有标签
var lis = document.getElementsByTagName('获取对象集合,不管有没有都返回伪数组');
console.log(lis[1]);
获取父元素内部的
element.getElementsByTagName('标签名');
这里的element一定要指明,获取时不包括自己
获取类
document.getElementsByClassName('');
新增 不考虑兼容性可用
document.querySelector('可选择所有 带符号.# 返回第一个元素');
document.querySelectorAll('同上');
特殊
document.body;
document.documentElement; //获取html
document.querySelector('tbody').querySelectorAll('tr')
document.getElementById('tb').getElementsByTagName('input')
事件:事件源 事件类型 事件处理程序
获取事件源
var btn = document.querySelector('div');
绑定事件 添加事件处理程序
btn.onclick = function(){
操作元素是DOM的核心内容
表单中元素内容使用value
div.innerText = '1'; //不识别html标签 非标准 去除空格和换行
btn.innerHTML = '<p><p>' //可显示标签 空格 换行
this.disabled = true; //点击一次后禁用
//行内样式用style
this.style.backgroundColor = 'red';
//修改样式过多时 用element.className 会覆盖原来类名
this.className = '新class名';
this.className = '原本类名 新类名'; //保留原类名
}
div.onfocus = function(){} //获得焦点(键盘输入)
div.onblur = function(){} //失去焦点
排他思想
节点操作
nodeType、nodeName、nodeValue
元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3
父节点 node.parentNode 返回亲爸爸
子节点 父.childNodes 所有子节点(包含文本节点)
父.childNodes[].nodeType
父.first/lastChild 包含其他节点
父.children 只获取元素节点(兼容性问题)
父.first/lastElementChild 返回第一个仅元素节点
父.children[父.children.length - 1]
兄弟节点 element.nextSibling 下一个包含文本节点
element.previousSibling
element.next/previousElementSibling 元素节点(兼容)
创建节点 var li = document.createElement('li') 先创建
ul.appendChild(li) 排后添加
ul.insertBefore(li,ul.children[0]) 指定在前插入
删除子节点 ul.removeChild(child)
ul.removeChild(ul.children[0])
if(ul.children.length == 0){
this.disabled = true; 禁用按钮
}
添加删除链接
li.innerHTML = text.value + "<a href = 'javascript:;'>删除</a>"
复制节点 node.cloneNode()
括号参数为空/false,为浅拷贝,只复制节点本身,不复制子节点
var lili = ul.children[0].cloneNode(true) 深拷贝
</script>
</body>
</html>