一、什么是加载事件onload
js代码执行时候,需要html&css的支持,就让html先执行(先进入内存),js代码后执行。
window.onload = function() {
}
onload在页面加载完之后执行
dom:用JS对html标签进行增删改查
二、元素节点获取
三、文本节点获取
hello
需要借助div元素节点再获得其内部的文本节点.
var dvnode = document.getElementsByTagName(‘div’)[0];
dvnode.firstChild; //(或调用lastChild)获得元素div内部的第
一个子节点对象,而不是自己这个节点
四、兄弟节点
firstChild、lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下个兄弟节点
previousSibling:获得上个兄弟节点
childNodes:父节点获得内部全部的子节点信息
五、父节点
节点.parentNode
六、属性值操作
<input type="text" name="username" value="tom" class="orange" /> <a href="http://www.baidu.com" addr="beijing" target="_blank">百度</a>
1. 获取属性值
itnode.属性名称; //只能操作w3c规定的属性
itnode.getAttribute(属性名称); //规定的 和 自定义的都可以获取
2. 设置属性值
itnode.属性名称 = 值; //只能操作w3c规定的属性
itnode.setAttribute(名称,值); //规定的 和 自定义的都可以设置
Field、Attribute、Property
七、节点创建和追加
- 节点创建
- 元素节点:document.createElement(tag标签名称);
- 文本节点:document.createTextNode(文本内容);
- 属性设置:node.setAttribute(名称,值);
- 节点追加:
- 父节点.appendChild(子节点);
- 父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
- 父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
<ul>
<li mean='热情'>red</li>
<li mean='冷静'>green</li>
<li mean='生机'>blue</li>
</ul>
-->
<script type="text/javascript">
window.onload = function() {
var colors = ['red', 'green', 'blue'];
var colorMeans = ['热情', '冷静', '生机'];
var ul = document.createElement('ul');
/*for (var color of colors) {
console.log(color);
}*/
/*for (var i in colors) {
console.log(i); // 0, 1, 2
}*/
for (var i = 0; i < colors.length; i++) {
var li = document.createElement('li');
li.setAttribute('mean', colorMeans[i]);
var textNode = document.createTextNode(colors[i]);
li.appendChild(textNode);
ul.appendChild(li);
}
document.body.appendChild(ul);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li mean='热情'>red</li>
<li mean='生机'>blue</li>
<li mean='冷静'>green</li>
</ul>
<ul>
<li mean='饿'>orange</li>
</ul>
<script type="text/javascript">
window.onload = function() {
var blue = document.getElementsByTagName('li')[1];
var orange = document.getElementsByTagName('li')[3];
var firstUl = document.getElementsByTagName('ul')[0];
//firstUl.appendChild(orange);
//firstUl.insertBefore(orange, blue);
firstUl.replaceChild(orange, blue);
}
</script>
</body>
</html>
八、节点删除
父节点.removeChild(子节点);
九、总结
DOM操作
- 元素、文本、属性、document节点获取
- 元素:getElementById()/getElementsByTagName()
- 文本:元素节点.firstChild/lastChild;
- 属性:元素节点.attributes;元素节点.attributes.属性名称;
document:元素节点.parentNode
- 属性值操作
- 元素节点.属性名称;
- 元素节点.属性名称 = 值;
- 元素节点.getAttribute(属性名称);
- 元素节点.setAttribute(属性名称,值);
- 节点创建、追加、复制、删除
- 创建:
元素-document.createElement(tag名称);
文本-document.createTextNode(文本内容);
元素节点.setAttribute();
- 追加:
父.appendChild(子);
父.replaceChild(new,old);
父.insertBefore(new,old);
- 删除:
父.removeChild(子)
十、点击事件
通过鼠标、键盘对页面所做的动作就是事件。
事件一旦发生需要有事件处理,该处理称为“事件驱动”,事件驱动通常由函数担任
onclick onmouseover onmouseout onkeyup onkeydown onblur onfocus onsubmit
- 在标签内写onclick事件
- 在JS写 onlicke=function(){} 函数
var btn = document.getElementById('btnId');
btn.onclick = function () {
alert('thanks');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="alert('hello')">click1</button>
<input type="button" value="click2" onclick="cli()" onmouseover="over()" onmouseout="out()"/>
<input type="text" onfocus="focu()" onblur="blu()">
<input id="btnId" type="button" value="click3" />
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById('btnId');
btn.onclick = function () {
console.log('onlick');
}
btn.onmouseover = function () {
console.log('onmouseover');
}
btn.onmouseout = function () {
console.log('onmouseout');
}
}
function cli() {
console.log('cli');
}
function over() {
console.log('over');
}
function out() {
console.log('out');
}
function focu() {
console.log('focus');
}
function blu() {
console.log('blur');
}
</script>
</body>
</html>
十一、综合案例:百度换肤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 150px;
height: 150px;
}
.box{
/*水平居中*/
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
background-color: rgba(99,134,177,0.6);
}
body{
background-image: url("images/1.jpg");
background-size: cover; /* 图像将铺满整个元素 */
background-repeat: no-repeat;/* 防止图像平铺 */
}
</style>
</head>
<!-- style="background-image: ;" -->
<body style="">
<div class="box">
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
<img src="images/5.jpg"/>
</div>
<script type="text/javascript">
window.onload = function () {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].onclick = function () {
//this 代表当前点击对象
var imageSrc = this.src;
//document.body.style.backgroundImage = 'url("images/2.jpg")';
document.body.style.backgroundImage = 'url("'+imageSrc+'")';
}
}
}
</script>
</body>
</html>