javaScript-第三章

javaScript-第三章

一、认识DOM对象模型

DOM:Document Object Model(文档对象模型)

...

节点与节点的关系


...

1、访问节点,使用getElement系列方法访问指定节点

getElementById()、 getElementsByName()、

getElementsByTagName();

2、根据层次关系访问节点:

属性名称 描述

parentnode 返回节点的父节点

childNodes 返回子节点集合,childNodes[i]

firstChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点

lastChild 返回节点的最后一个子节点

nextSibling 下一个节点

previousSibling 上一个节点


elment属性:

属性名称 描述

firstElementChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点

lastElementChild 返回节点的最后一个子节点

nextElementSibling 下一个节点

previousElementSibling 上一个节点


节点信息表示:

nodeName:节点名称

nodeValue:节点值

nodeType:节点类型


操作节点的属性:

getAttribute("属性名")

setAttribute("属性名","属性值")


创建和插入节点:

名称 描述

createElement( tagName) 创建一个标签名为tagName的新元素节点

A.appendChild( B) 把B节点追加至A节点的末尾

insertBefore( A,B ) 把A节点插入到B节点之前

cloneNode(boolean) 复制(克隆)某个指定的节点

删除和替换节点:

名称 描述

removeChild( node) 删除指定的节点

replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点


操作节点样式:

改变样式的属性

style属性

HTML元素.style.样式属性="值";


className属性

HTML元素.className="样式名称";


...

二、示例展示

1.轮播图示例

<!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>轮播图显示</title>

</head>

<style>

* {

margin: 0;

padding: 0;

}


#outer {

width: 300px;

margin: 50px auto;

padding: 10px;

background-color: greenyellow;

text-align: center;

}


#outer>img {

width: 300px;

height: 300px;

}

</style>

<script>

window.onload = function () {

// 点击按钮切换图片

var prev = document.getElementById("prev");

var next = document.getElementById("next");

// 要切换图片就要修改img标签的src属性

var img = document.getElementsByTagName("img")[0];

var imgArr = ["img/tou01.jpg", "img/tou02.jpg", "img/tou03.jpg", "img/tou04.jpg"];

// 创建一个变量,来保存当前正在显示的图片的索引

var index = 0;

// 设置提示文字

var info=document.getElementById("info");


// 分别为两个按钮绑定单机响应函数 上一张函数


prev.onclick = function () {

index--;

// 判断index是否小于0

if (index < 0) {

index=imgArr.length-1;

}

img.src = imgArr[index];

info.innerHTML="共"+imgArr.length+"张图片"+"当前是第"+(index+1)+"张";

}

// 下一张函数

next.onclick = function () {

index++;

if (index > imgArr.length - 1) {

index = 0;

}

img.src = imgArr[index];

// 当我在点击按钮以后在重新执行一遍

info.innerHTML="一共"+imgArr.length+"张图片"+"当前是第"+(index+1)+"张";

}

}


</script>


<body>

<div id="outer">

<p id="info">一共4张图片当前是第1张</p>

<img src="img/tou01.jpg" alt="" />


<button id="prev"><上一张</button>

<button id="next">下一张></button>

</div>


</body>


</html>


2.论坛发帖示例

<!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>制作课工场论坛发贴</title>

</head>

<style>

*{margin: 0; padding: 0; font-family: "Arial", "微软雅黑";}

ul,li{list-style: none;}

.bbs{margin: 0 auto; width: 600px; position: relative;}

header{padding: 5px 0; border-bottom: 1px solid #cecece;}

header span{display:inline-block; width: 220px; height: 50px; color: #fff; background: #009966; font-size: 18px; font-weight: bold; text-align: center;line-height: 50px; border-radius: 8px; cursor: pointer;}

.post{position: absolute; background: #ffffff; border: 1px #cccccc solid; width: 500px; left: 65px; top:70px; padding: 10px; font-size: 14px; z-index: 999999; display: none;}

.post .title{width: 450px; height:30px; line-height: 30px; display: block; border: 1px #cecece solid; margin-bottom: 10px;}

.post select{width: 200px; height: 30px;}

.post .content{width: 450px; height: 200px; display: block; margin: 10px 0;border: 1px #cecece solid;}

.post .btn{width: 160px; height: 35px; color: #fff; background: #009966; border: none; font-size: 14px; font-weight: bold; text-align: center; line-height: 35px; border-radius: 8px; cursor: pointer;}


.bbs section ul li{padding: 10px 0; border-bottom: 1px #999999 dashed;

overflow: hidden;}

.bbs section ul li div{float: left; width: 60px; margin-right: 10px;}

.bbs section ul li div img{ border-radius:50%; width: 60px;}

.bbs section ul li h1{float: left; width: 520px; font-size: 16px; line-height: 35px;}

.bbs section ul li p{color: #666666; line-height: 25px; font-size: 12px; }

.bbs section ul li p span{padding-right:20px;}

</style>

<body>

<div class="bbs">

<header><span onclick="showDiv();">我要发帖</span></header>

<section>

<ul id="showContent"></ul>

</section>

<div class="post" id="showSubmit">

<input class="title" placeholder="请输入标题(1-50个字符)" id="title">所属版块:

<select id="section">

<option>请选择版块</option>

<option value="电子书籍">电子书籍</option>

<option value="新课来了">新课来了</option>

<option value="新手报到">新手报到</option>

<option value="职业规划">职业规划</option>

</select>

<textarea class="content" id="content"></textarea>

<input class="btn" value="发布" onclick="publish();">

</div>

</div>

</body>

<script src="js/bbs.js"></script>

</html>

// 全局对象

var imgs = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");

// 显示发帖div

function showDiv() {

document.getElementById("showSubmit").style.display = "block";

}


// 点击发布添加内容到Li


function publish() {

// 获得随机头像的数组下标

var index = Math.floor(Math.random() * 4);

// 创建li节点

var tvLi = document.createElement("li");

// 创建div节点

var tvDiv = document.createElement("div");

// 创建img图片节点

var tvImg = document.createElement("img");


// 设置图片节点src属性

tvImg.setAttribute("src", "../threeClass/img/" + imgs[index]);


// div添加图片为子节点

tvDiv.appendChild(tvImg);

// 创建h1标签节点


var tvh1 = document.createElement("h1");

// 取得发布div框里填充的标题的值填充到h1标签

var tvTitle = document.getElementById("title").value;

tvh1.innerText = tvTitle;

// 创建一个P标签节点

var tvP = document.createElement("p");

// 创建两个span标签节点

var tvSpanOne = document.createElement("span");

var tvSpanTwo = document.createElement("span");


// 第一个span标签取填充div里的下拉列表框所选的值

var tvSelect = document.getElementById("section").value;

tvSpanOne.innerText = "板块:" + tvSelect;


// 第二个span标签取当前系统时间

var date = new Date();

var str = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() + "" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

tvSpanTwo.innerText = "时间是:" + str;


// 两个span标签追加到p标签节点里

tvP.appendChild(tvSpanOne);

tvP.appendChild(tvSpanTwo);


// 把div、h1、p 、标签追加到li里


tvLi.appendChild(tvDiv);

tvLi.appendChild(tvh1);

tvLi.appendChild(tvP);


// 把添加好的li在插入到ul标签节点里

var oldUL = document.getElementById("showContent");

// 把新添加的li节点插入到捞的li节点之前

oldUL.insertBefore(tvLi, oldUL.firstChild);


// 清除div里填充过的内容,如标题和内容部分

document.getElementById("title").value = "";

document.getElementById("content").value = "";


// 设置发布div隐藏

document.getElementById("showSubmit").style.display = "none";

}


效果图展示:file:///D:/ruanjian/VS/JS/threeClass/lunbotu.html

file:///D:/ruanjian/VS/JS/threeClass/lunbotu.html