网站首页 > 知识剖析正文

javaScript-第三章

nixiaole 2024-11-26 07:11:28 知识剖析 18 ℃

一、认识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>

<head>

<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>

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>

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

</div>

</body>

</html>

2.论坛发帖示例

<!DOCTYPE html>

<head>

<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>

</section>

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

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

</select>

</div>

</body>

</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

上一篇：怎么修改WordPress网站divi主题修改中文字体样式CSS?
下一篇：那些你从不使用的且有趣的HTML属性

网站首页 > 知识剖析 正文

javaScript-第三章

猜你喜欢

网站首页 > 知识剖析正文