创建并加入节点&练习
2024-08-26 20:49:08
1.节点的属性
节点的属性:所有节点都有的属性 | 元素节点, 属性节点, 文本节点 |
nodeType | 只 读 属 性 |
nodeName | 返回对应节点的名字,只读属性 |
nodeVALUE 可读写属性 | null 属性值, 文本值 |
2. 创建一个元素节点:
createElement(): 按照给定的标签名创建一个新的元素节点.
方法只有一个参数:被创建的元素节点的名字, 是一个字符串.
方法的返回值:是一个指向新建节点的引用指针.
返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.
3. 创建一个文本节点:
createTextNode(): 创建一个包含着给定文本的新文本节点.
这个方法的返回值是一个指向新建文本节点引用指针.
它是一个文本节点, 所以它的 nodeType 属性等于 3.
方法只有一个参数:新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里
4. 为元素节点添加子节点:
appendChild(): var reference = element.appendChild(newChild):
给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
方法的返回值是一个指向新增子节点的引用指针.
dom7.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title> <script type="text/javascript">
window.onload = function() {
//新创建的一个元素节点,并把该节点添加为文档中指定节点的子节点
var liNode = document.createElement("li"); //创建武汉的文本节点 ,createTextNode(String),
var whText = document.createTextNode("武汉");
liNode.appendChild(whText) var cityNode = document.getElementById("city");
cityNode.appendChild(liNode); }
</script> </head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br>
<br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br>
<br> name:
<input type="text" name="username" id="name" value="xiaoxiaolin">
</body>
</html>
练习2:
exe3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title> <script type="text/javascript">
//需求1:点击submit按钮,检查是否选择type,若没有选择则给出提示:"请选择类型"
// 检查文本框中是否有输入(可以去除空格),若没有输入,则给出提示"请输入内容";
// 若检查都通过,则在相应的ul节点中添加li节点 //需求2:使包括新增的li,都能响应onclick事件:弹出li的文本值
window.onload = function() {
function showContent(liNode){
alert("^^"+liNode.firstChild.nodeValue);
} var liNodes = document.getElementsByTagName("li");
for (var i = 0; i < liNodes.length; i++) {
liNodes[i].onclick = function(){
showContent(this);//当前的节点
}
} //id 用#表示
//1. 获取 #submit 对应的按钮 submitBtn
var submit =document.getElementById("submit");
//2.为submit添加响应函数
submit.onclick = function(){ //4.检查是否选择type,若没有选择给出提示:"没有选择"
//4.1选择所有的name = type,的节点types
var types = document.getElementsByName("type"); //4.2遍历types,检查是否有一个type的checked属性存在,存在就说明有一个type被选中了
// 通过if(元素节点.属性名)来判断某一个元素节点是否有该属性
var typeVal = null;
for (var i = 0; i < types.length; i++) {
if (types[i].checked) {
typeVal = types[i].value;
break;
}
}
//4.3若没有任何一个type被选中,则弹出:"请选择类型",相应方法结束: return false
if (!typeVal) {
alert("请选择类型");
return false;
} //alert(typeVal); //5.获取name="name"的文本值(输入的文本值):通过value属性:nameVal
var nameEle = document.getElementsByName("name")[0];
var nameVal = nameEle.value; //6.使用正则表达式去除 nameVal的前后空格,
var reg = /^\s*|\s*$/g;
nameVal = nameVal.replace(reg,""); //使name的文本框也去除前后空格
nameEle.value = nameVal;
//7.把nameVal和""进行比较,若是"" 说明只输入空格,弹出"请输入内容"
if (nameVal == "") {
alert("请输入内容");
return false;
} //8.创建li节点
var liNode =document.createElement("li"); //9.利用 nameVal 创建文本节点
var content = document.createTextNode("nameVal"); //10.把创建的文本节点作为刚创建li节点的子节点
liNode.appendChild(content); //12.为新创建的li添加 onclick响应函数
liNode.onclick = function(){
showContent(this);
} //11.把上面的节点加为选择type对应的ul子节点
document.getElementById(typeVal).appendChild(liNode); //3.在onclick响应函数的结尾添加return false 就可以取消提交按钮的行为
return false;
}
}
</script> </head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br>
<br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br>
<br> <form action="dom-7.html" name="myform"> <input type="radio" name="type" value="city">城市
<input type="radio" name="type" value="game">游戏 name: <input type="text" name="name"/> <input type="submit" value="Submit" id="submit"/> </form>
</body>
</html>
最新文章
- solr update接口常用方法
- C# 6.0 功能预览 (一)
- eclipse中输入中文为繁体
- js020-JSON
- windows server 2008 - 创建域和本机用户
- nodeschool.io 5
- HDU-1339 A Simple Task
- [Angular 2] The form export from NgFormControl
- codeforces 400E. Inna and Binary Logic 线段树
- UVa 10400 - Game Show Math
- java-FFmpeg(一) 实现视频的转码和截图功能
- Linux ssh双向免密认证
- cookie和sission的原理及异同
- mkyaffs2image 生成不了120M的镜像文件的解决方法
- MarkDown基础语法记录
- php的四种基本算法
- media静态文件统一管理 操作内存的流 - StringIO | BytesIO PIL:python图片操作库 前端解析二进制流图片(了解) Admin自动化数据管理界面
- 混乱之子第七季/全集Sons of Anarchy迅雷下载
- 【iOS开发-36】Bundle Identifier的中文字符变成-的问题
- monoDB环境搭建