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>

创建并加入节点&练习的更多相关文章

  1. DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

    DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个 ...

  2. 创建和删除节点：——核心DOM

    1. 创建单个元素节点:3步:       1. 创建空元素节点对象:          var elem=document.createElement("标签名");      ...

  3. DOM创建和删除节点、HTML DOM常用对象[转]

    创建和删除节点:——核心DOM   1. 创建单个元素节点:3步:      1. 创建空元素节点对象:         var elem=document.createElement("标 ...

  4. DOM操作——JavaScript怎样添加、移除、移动、复制、创建和查找节点

    (1). 创建新节点 createDocumentFragment() // 创建一个DOM片段 createElement() // 创建一个具体的元素 createTextNode() // 创建 ...

  5. DOM操作怎样添加、移除、移动、复制。创建和查找节点？

    (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节 ...

  6. linux下自动创建设备文件节点---class

    在驱动模块初始化函数中实现设备节点的自动创建 我们在刚开始写Linux设备驱动程序的时候,很多时候都是利用mknod命令手动创建设备节点,实际上Linux内核为我们提供了一组函数,可以用来在模块加载的 ...

  7. JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

    DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...

  8. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

  9. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  10. Docker 两键创建 ZeroTier moon 节点

    一条命令创建 ZeroTier moon 节点: $ docker run --name zerotier-moon -d -p 9993:9993 -p 9993:9993/udp seedgou/ ...

随机推荐

  1. python安装pycrypto库

    使用pycharm时安装pycrypto库,一直安装不上,提示安装成功,退出去一看,依旧没有 最后选择了pip安装,但一直报错(Microsoft Visual C++ 9.0 is required ...

  2. Java——TCP/IP超详细总结

    网络的基础知识 一.协议 1.简介: 在计算机网络与信息通信领域里,人们经常提及“协议”一词.互联网中常用的具有代表性的协议有IP.TCP.HTTP等.而LAN(局域网)中常用的协议有IPX/SPX” ...

  3. P1635 跳跃

    传送门 观察到\(4x+3=2(2x+1)+1\)以及\(8x+7=2(2(2x+1)+1)+1\) 所以可以把\(xx->2x+12x+1\)当成一个基本变化 则\(xx->4x+3\) ...

  4. RabbitMQ的轮询模式和公平分发

    一.常用的消息模式 我们在工作的使用中,经常会遇到多个消费者监听同一个队列的情况,模型如下图所示: 当有多个消费者时,我们的消息会被哪个消费者消费呢,我们又该如何均衡消费者消费信息的多少呢: 主要有两 ...

  5. 004_Python的列表切片,增删改查,常用操作方法,元组,range,join

    列表 列表是Python中的基础数据类型之一,它是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = ['kevin',123,True,(1,2,3,'wusir'), ...

  6. 1、Hbase原理分析

    一.Hbase介绍 1.1.对Hbase的认识 HBase作为面向列的数据库运行在HDFS之上,HDFS缺乏随机读写操作,HBase正是为此而出现. HBase参考 Google 的 Bigtable ...

  7. Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路

    封装一个ECharts组件的一点思路 有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system ...

  8. 【FreeRTOS学习01】CubeIDE快速整合FreeRTOS创建第一个任务

    整个专栏主要是博主结合自身对FreeRTOS的实战学习以及源码分析,基于STM32F767 Nucleo-144平台,在CubeIDE下进行开发,结合官方的HAL库,将硬件环节的问题减少到最小,将精力 ...

  9. Git管理修改、撤销修改、删除文件

    什么是修改?比如你新增了一行,这就是一个修改,删除了一行,也是一个修改,更改了某些字符,也是一个修改,删了一些又加了一些,也是一个修改,甚至创建一个新文件,也算一个修改. a.管理修改 对于提交修改, ...

  10. C# 9.0 新特性预览 - 空参数校验

    C# 9.0 新特性预览 - 空参数校验 前言 随着 .NET 5 发布日期的日益临近,其对应的 C# 新版本已确定为 C# 9.0,其中新增加的特性(或语法糖)也已基本锁定,本系列文章将向大家展示它 ...