JavaScript基础&Demo（二）
目录
一、 案例1---在末尾添加节
a) 创建新的节点。createElement(“ElementName”);
b) 创建新的文本节点。createTextNode()
c) 在节点中添加文本节点。appendChild()
d) 将节点加在所要放置的父节点下。
二、 Element对象
要操作Element对象，首先要获取到Element对象。
--通过document.getElementById()
方法名 | 作用 | 备注 |
getAttribute(“属性名称”) | 获取元素的属性 | 传统的元素.属性的方式获得某个属性值的时候，如果获取的是关键字，则会出错。而同通过这个方法可以避免这些错误。 |
setAttribute(“属性名称”,value) | 给某个属性赋值。 | 不同的浏览器的缓存机制不同。 |
removeAttribute(“属性名称”) | 删除某个属性 | 不能够删除value值。 |
document.getElementByTagName(“标签名”) | 获得某个标签的子标签的唯一方法。 | 使用时采用的时tagname. .getElementByTagName(“标签名”)使用。 |
childNodes() | 获取某个标签的子标签 | 兼容性不好，不适用 |
三、 Node对象
2.1 获得node的所有子标签
获取莫个节点的所有子标签。
1、 首先获得父节点：getElementById(“”)
2、 通过父节点标签调用childNodes()获得子标签,但是这个方法会导致空格等信息都看作看一个属性，返回子标签的集合
3、 采用getElementByTagName(“标签名”)获取标签集合，获取标签下的子标签唯一有效的方法，他是属于document方法。
2.2 常用属性：
属性名 | 作用 | 备注 |
nodeName | 节点名称 |
|
nodetype | 节点类型 | 1：元素节点 2：属性节点 3：文本节点 |
nodeValue | 节点值 |
|
2.3 父节点，子节点，同辈节点
父节点与子节点的关系：在树种，由一个节点向另一个节点引出一条有向边，这个节点在这个节点对中称作父节点，被连接的节点称作子节点。父节点再引出一条有向边到另一个节点，则这两个被引出的节点的值被称作同辈节点或兄弟姐妹节点。
属性名 | 作用 | 备注 |
ParentNode | 获得父节点 |
|
childNodes | 获得所有子节点 | 兼容性差，不用 |
firstChild | 获得第一个子节点 |
|
lastChild | 获得最后一个子节点 |
|
nextSibling | 获得下一个同辈节点 |
|
pervirousSibling | 获得上一个同辈节点 |
|
四、 操纵DOM树
常见的属性或者方法：
方法 | 作用 | 备注 |
appendChild(tagName) | 在该节点下添加一个子节点 | 类似于剪切黏贴的效果，也就是说会将节点移动到其他的父节点下。 |
insertBefore(newNode,oldNode) | 在某个节点之前加入一个新的节点。 | 两个参数要加入的节点，和旧节点。 |
removeChild(tagName) | 删除节点 | 自己不能够删除自己，只能够通过父节点进行删除。 |
replace(newNode,oldNode) | 使用新的节点替换旧的节点。 | 需要通过父节点进行替换操作。 |
cloneNode(boolean) | 赋值节点 | Boolean为true复制子节点，为false不复制子节点 |
五、 innerHTML属性
特性：
1、 不是dom的组成
2、 部分，是大多数浏览器都支持的属性
3、 获取文本的内容、
4、 向标签内部设置内容（可以是html代码）
六、 案例2—动态显示时间
6.1 过程：
1、 得到当前时间。
a) var date = new Date();
b) var d1 = date.toLocaleString()
2、 页面定时获取时间。
setInterval 方法定时器
3、 每一秒向页面显示一个时间
6.2 代码：
//demo2.html
<html>
<head>
</head>
<body>
<div id ="times">
</div>
<script type ="text/javascript">
function getD1(){
var date =new Date();
//格式化
d1=date.toLocaleString();
//获取div
var div1 =document.getElementById("times");
div1.innerHTML= d1;
}
setInterval("getD1()",1000);
</script>
</body>
</html>
七、 案例3：全选练习
7.1 设计流程：
1、 创建一个页面
1. 复选框和按钮、
a) 四个复选框表示爱好
b) 还有一个复选框操作，全选和不选，也有一个事件
2. 三个按钮分别有事件
a) 全选
操作步骤：
1. 获取要操作的复选框
2. 返回数组：
3. 复选框：checked = true 选中,checked = false 不选中
b) 全不选
c) 反选
7.2 demo3.html代码
<html>
<head>
</head>
<body>
<inputtype="checkbox" id = "boxid" οnclick="selAllNo()"/>全选/全不选
<br/>
<inputtype="checkbox" name = "love"/>篮球<br/>
<inputtype="checkbox" name = "love"/>排球<br/>
<inputtype="checkbox" name = "love"/>羽毛球<br/>
<inputtype="checkbox" name = "love"/>乒乓球<br/>
<inputtype="button" value = "全选" onclick ="selAll()"/>
<inputtype="button" value = "全不选" onclick ="selNo()"/>
<inputtype="button" value = "反选" onclick ="selOther()"/>
<scripttype = "text/javascript">
functionselAll(){
varcheckboxs = document.getElementsByName("love");
for(vari = 0;i<checkboxs.length;i++){
varlove1 = checkboxs[i];
love1.checked= true;
}
}
functionselAllNo(){
varcheckboxs = document.getElementsByName("love");
varcheckAllBox = document.getElementById("boxid");
varflag = checkAllBox.checked;
for(vari = 0;i<checkboxs.length;i++){
varlove1 = checkboxs[i];
if(flag){
love1.checked= true;
}
else{
love1.checked= false;
}
}
}
functionselNo(){
varcheckboxs = document.getElementsByName("love");
for(vari = 0;i<checkboxs.length;i++){
varlove1 = checkboxs[i];
love1.checked= false;
}
}
functionselOther(){
varcheckboxs = document.getElementsByName("love");
for(vari = 0;i<checkboxs.length;i++){
varlove1 = checkboxs[i];
if(love1.checked==true){
love1.checked= false;
}else{
love1.checked= true;
}
}
}
</script>
</body>
</html>
八、 案例4：下拉列表左右选择
8.1 下拉选择框的属性 ---select
属性名 | 效果 |
|
multiple =”” | 显示所有的属性 |
|
|
|
|
8.2 过程
a) 创建一个页面
i. 两个下拉选择框
1. 设置属性 multiple
ii. 有四个按钮，存在四个事件
8.3 实现代码
//demo4.html
<html>
<head>
demo4
</head>
<body>
<br/>
<selectname="" id="selLeft" multiple = " multiple">
<optionvalue=""> AA</option>
<optionvalue=""> BB</option>
<optionvalue=""> CC</option>
<optionvalue=""> DD</option>
</select>
<selectname="" id="selRight"multiple = " multiple">
<optionvalue=""> EE</option>
</select>
<br/>
<inputtype="button" value = "one left to right" οnclick="oneLeftToRight()"/>
<inputtype="button" value = "one right to left" οnclick="oneRightToLeft()"/>
<br/>
<inputtype="button" value = "All left to right"οnclick="allLeftToRight()"/>
<inputtype="button" value = "All right to left"οnclick="allRightToLeft()"/>
<script>
functiononeLeftToRight(){
varselectLeft = document.getElementById("selLeft");
varselectRight = document.getElementById("selRight");
varoptions = selectLeft.getElementsByTagName("option");
for(vari = 0 ;i<options.length;i++){
option= options[i];
if(option.selected){
selectRight.appendChild(option);
i--;
}
}
}
functiononeRightToLeft(){
varselectLeft = document.getElementById("selRight");
varselectRight = document.getElementById("selLeft");
varoptions = selectLeft.getElementsByTagName("option");
for(vari = 0 ;i<options.length;i++){
option= options[i];
if(option.selected){
selectRight.appendChild(option);
i--;
}
}
}
functionallLeftToRight(){
varselectLeft = document.getElementById("selLeft");
varselectRight = document.getElementById("selRight");
varoptions = selectLeft.getElementsByTagName("option");
for(vari = 0 ;i<options.length;i++){
option= options[i];
selectRight.appendChild(option);
i--;
}
}
functionallRightToLeft(){
varselectLeft = document.getElementById("selRight");
varselectRight = document.getElementById("selLeft");
varoptions = selectLeft.getElementsByTagName("option");
for(vari = 0 ;i<options.length;i++){
option= options[i];
selectRight.appendChild(option);
i--;
}
}
</script>
</body>
</html>
九、 案列5：省市联动
9.1 创建流程：
1、 创建页面
a) 两个下拉选择框。
b) 第一个下拉框中存在一个onchange事件，当一个下拉框被选择时会触发这一个事件。
9.2 代码实现：
//demo5.html
<html>
<head>
demo5
</head>
<body>
<br/>
<selectname="" id="country" onchange = "add()">
<optionvalue="0">----please select----</option>
<optionvalue="China">China</option>
<optionvalue="Amer">amer</option>
<optionvalue="De">de</option>
<optionvalue="Japan">Japan</option>
</select>
<selectname="" id="city"> </select>
<br/>
<inputtype = "button" value = "test" οnclick="add()"/>
<script>
//存放城市数
vararr = new Array(4)
arr[0]= ["China","NanJin"];
arr[1]= ["Amer","HuaShengDun"]
arr[2]= ["De","BoLin"]
arr[3]= ["Japan","BeiHaiDao"]
functionadd(){
removeAll();
varselectCountry = document.getElementById("country");
varoptions = selectCountry.getElementsByTagName("option");
varvalue ;
//获取用户选择的值
for(var i =0;i<options.length;i++) {
if(options[i].selected){
value= options[i].value;
}
}
varselectCity = document.getElementById("city");
for(vari = 0 ;i<arr.length;i++){
if(arr[i][0]==value){
for(varj = 1;j<arr[i].length;j++){
varoption = document.createElement("option");
vartext = document.createTextNode(arr[i][j]);
option.appendChild(text)
selectCity.appendChild(option);
}
}
}
}
//移除城市复选框的所有元素
functionremoveAll(){
varselectCity= document.getElementById("city");
varoptions = selectCity.getElementsByTagName("option");
for(var i = 0 ;i<options.length;i++){
varoption = options[i];
selectCity.removeChild(option);
i--;
}
//alert("removesucess")
}
</script>
</body>
</html>
十、 案例6：动态生成表格
10.1 页面设计
a) 两个输入框，行列
b) 一个按钮，生成表格。
10.2 设计过程：
a) 得到输入的列和行的值
b) 生成表格
c) 循环行
d) 循环列
e) 显示到页面
f) 把表格的代码设置到div里面
g) 使用innerHTML属性
10.3 代码实现
//demo6.html
<html>
<head>
demo6 create Table
</head>
<body>
<br/>
row: <input type="text"id = "row"/><br/>
col : <input type ="text" id = "col"/><br/>
<input type="button"value = "create" id = "create" onclick ="createTable()">
<div id = 'tableDiv'>
</div>
<script>
function createTable(){
/*
1、得到输入的列和行的值
2、生成表格
循环行
循环列
3、显示到页面
-把表格的代码设置到div里面
-使用innerHTML属性
*/
//获取输入的行和列
var row =document.getElementById("row").value;
var col =document.getElementById("col").value;
//把表格的代码放到一个变量里面
var tab ="<table border = '1' border='blue'>"
//循环行
for(var i= 1;i<=row;i++){
tab+="<tr>"
//循环列
for(varj = 1;j<=col;j++){
tab+="<td>aaa</td>"
}
tab+="</tr>"
}
tab+="</table>"
//得到div标签
var tableDiv =document.getElementById("tableDiv");
//把table代码设置到div中
tableDiv.innerHTML= tab;
}
</script>
</body>
</html>
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
