DOM的概念
文档对象模型（Document Object Model，简称DOM）。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。 DOM又称文档树模型
文档：一个网页可以称为文档节点：网页中的所有内容都是节点（标签, 属性, 文本， 注释等）元素：网页中的标签属性：标签的属性
DOM经常进行的操作
获取元素对元素进行操作（设置其属性或调用其方法）动态创建元素事件（什么时候做相应的操作）
获取页面元素
根据id获取元素
<script
>
var boxs
= document
.getElementById('box')
console
.log(boxs
); /
</script
>
根据标签名获取元素
<script
>
var divs
= document
.getElementsByTagName('div')
for (var i
= 0; i
< divs
.length
; i
++) {
var div
= divs
[i
]
}
console
.log(div
);
</script
>
根据name获取元素*
var inputs
= document
.getElementsByName('hobby');
for (var i
= 0; i
< inputs
.length
; i
++) {
var input
= inputs
[i
];
console
.log(input
);
}
根据类名获取元素*
var mains
= document
.getElementsByClassName('main');
for (var i
= 0; i
< mains
.length
; i
++) {
var main
= mains
[i
];
console
.log(main
);
}
根据选择器获取元素*
var text
= document
.querySelector('#text');
console
.log(text
);
var boxes
= document
.querySelectorAll('.box');
for (var i
= 0; i
< boxes
.length
; i
++) {
var box
= boxes
[i
];
console
.log(box
);
}
掌握：
getElementById()getElementsByTagName()
了解：
getElementsByName()getElementsByClassName()querySelector()querySelectorAll()
事件
事件：触发响应机制
事件三要素
事件源：触发（被）事件的元素事件名称：click点击事件事件处理程序：事件触发后要执行的代码（函数形式）
事件的基本语法
var box
= document
.getElementById('box');
box
.onclick = function() {
console
.log('代码会在box被点击后执行');
};
属性操作
非表单元素的属性
innerHTML和innerText
var box
= document
.getElementById('box');
box
.innerHTML
= '我是文本<p>我会生成为标签</p>';
console
.log(box
.innerHTML
);
box
.innerText
= '我是文本<p>我不会生成为标签</p>';
console
.log(box
.innerText
);
表单元素属性
value 用于大部分表单元素的内容获取(option除外)type 可以获取input标签的类型(输入框或复选框等)disabled 禁用属性checked 复选框选中属性selected 下拉菜单选中属性
自定义属性操作
getAttribute() 获取标签行内属性setAttribute() 设置标签行内属性removeAttribute() 移除标签行内属性与element.属性的区别: 上述三个方法用于获取任意的行内属性。
