创建并加入节点&练习
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>
创建并加入节点&练习的更多相关文章
- DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个 ...
- 创建和删除节点：——核心DOM
1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标签名"); ...
- DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标 ...
- DOM操作——JavaScript怎样添加、移除、移动、复制、创建和查找节点
(1). 创建新节点 createDocumentFragment() // 创建一个DOM片段 createElement() // 创建一个具体的元素 createTextNode() // 创建 ...
- DOM操作怎样添加、移除、移动、复制。创建和查找节点？
(1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节 ...
- linux下自动创建设备文件节点---class
在驱动模块初始化函数中实现设备节点的自动创建 我们在刚开始写Linux设备驱动程序的时候,很多时候都是利用mknod命令手动创建设备节点,实际上Linux内核为我们提供了一组函数,可以用来在模块加载的 ...
- JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点
DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...
- js进阶 11-9/10/11 jquery创建和插入节点
js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- Docker 两键创建 ZeroTier moon 节点
一条命令创建 ZeroTier moon 节点: $ docker run --name zerotier-moon -d -p 9993:9993 -p 9993:9993/udp seedgou/ ...
随机推荐
- Jmeter 后置处理器
1.JSON Extractor Json extractor 后置处理器用在返回格式为 Json 的 HTTP 请求中,用来获取返回的 Json 中的某个值.并保存成变量供后面的请求进行调用或断言等 ...
- startUML简单使用教程
最近在startUML上画图搞得我一个头两个大,找了一些比较实用的小方法分享给大家. 类图是可视化地表现类的属性和方法,以及类与类之间的关系. 1.类 a.类 普通实体类,它有对应的属性和方法: 双击 ...
- AIDL原理分析
季春初始,天气返暖,新冠渐去,正值学习好时机.在Android系统中,AIDL一直在Framework和应用层上扮演着很重要的角色,今日且将其原理简单分析.(文2020.03.30) 一.开篇介绍 1 ...
- 挑战程序竞赛 反转开关 poj3276
这个我其实也没有看太懂它的证明过程. 1.若某一个位置被翻转了n次,则其实际上被翻转了n%2次. 2.分析易知翻转的顺序并不影响最终结果. 3.现在我们着眼于第1个位置,可知若要将第1个位置进行翻转只 ...
- Android(H5)互相调用方法
记录一下前面混合开发时很重要的java与js互调方法进行数据交互. 混合开发就需要webview这个控件了 这就很玄学了,哈哈哈 这篇文章https://www.jianshu.com/p/3d9a9 ...
- X Error:BadDrawable (individ Pixmap or Window parameter 9)
#描述 平台:aarch64 系统:ubuntu16.04.02 Qt Version:4.8.7 Qt程序可以正常运行,界面渲染出现问题以及乱码,控制提示错误内容: "unable to ...
- git使用-忽略文件更新的几种方法
有几种情况我们不希望本地文件在 git 里面得到更新. 一.情况:始终不需要git跟踪本地的一些文件 方法:使用.gitignore文件忽略 解释: 使用git init操作创建git控制管理之后,默 ...
- [hdu1242]优先队列
题意:给一个地图,'x'走一步代价为2,'.'走一步代价为1,求从s到t的最小代价.裸优先队列. #pragma comment(linker, "/STACK:10240000,10240 ...
- 解决：idea中右键项目找不到subversion
2019.02版IDEA,刚刚发现更新不了项目,但是我记得之前的项目是可以直接更新的.然后,我打开之前的项目找到相关项,对比了一下,找到了方法: file--settings--Version Con ...
- C#实现局域网聊天 通讯 Socket TCP 多人
程序分别为服务端与客户端,服务端创建套接字使用多线程侦听多客户端请求 代码需要引用System.Net:和System.Net.Socket:这两个类 分享源码demo:https://pan.bai ...