创建并加入节点&练习

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 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript">
        
        //需求:  点击 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);
                }
            }
            
            //1. 获取 #submit 对应的按钮 submitBtn
            var submit = document.getElementById("submit");
            
            //2. 为 submitBtn 添加 onclick 响应函数
            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 == null){
                    alert("请选择类型");
                    return false;
                }
                
                //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;
                
                //6. 把 nameVal 和 "" 进行比较, 若是 "" 说明只出入了空格, 弹出 "请输入内容"
                //方法结束: return false
                if(nameVal == ""){
                    alert("请输入内容");
                    return false;
                }
                
                //7. 创建 li 节点
                var liNode = document.createElement("li");
                
                //8. 利用 nameVal 创建文本节点
                var content = document.createTextNode(nameVal);
                
                //9. 把 8 加为 7 的子节点
                liNode.appendChild(content);
                
                //11. 为新创建的 li 添加 onclick 响应函数
                liNode.onclick = function(){
                    showContent(this);
                }
                
                //10. 把 7 加为选择的 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>

创建并加入节点&练习

猜你喜欢