常见DOM操作(JS)

DOM

获取节点设置样式

// 获取<p id="p-id">...</p>
var p = document.getElementById("p-id");
// 设置CSS:
p.style.color = "#ff0000";
p.style.fontSize = "20px";
p.style.paddingTop = "2em"

动态创建一个节点

var
    list = document.getElementById("list"),
    haskell = document.createElement("p");
haskell.id = "haskell";
haskell.innerText = "Haskell";
list.appendChild(haskell);

这样我们就动态添加了一个新的节点：

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>

创建一个样式标签，将页面变为红色

var d = document.createElement("style");
d.setAttribute("type", "text/css");
d.innerHTML = "p { color: red }";
document.getElementsByTagName("head")[0].appendChild(d);

将子节点插到指定节点之前

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

可以这么写：

var
    list = document.getElementById("list"),
    ref = document.getElementById("python"),
    haskell = document.createElement("p");
haskell.id = "haskell";
haskell.innerText = "Haskell";
list.insertBefore(haskell, ref);

新的HTML结构如下：

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="haskell">Haskell</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

按字符串顺序重新排序DOM节点

<!-- HTML结构 -->
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>

// sort list:
var testList=document.getElementById("test-list");
var lis=document.getElementsByClassName("lang");

for(let i=0;i<lis.length;i++){
    for(let j=i+1;j<lis.length;j++){
        if(lis[i].innerText >lis[j].innerText){
            testList.insertBefore(lis[j],lis[i])
        }
    }
}

遍历ul中的节点

<!-- HTML结构 -->
<ul id="test-list">
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>

var list = document.getElementById("test-list");
for(var i=0;i<list.children.length;i++){
    var child=list.children[i].innerHTML;
    alert(child);
}

删除ul中的特定节点

<!-- HTML结构 -->
<ul id="test-list">
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>

"use strict";
// TODO
//var p=docuemnt.getElementById("test-list");
//var valid=new Set(["JavaScript","HTML","CSS"]);
var list = document.getElementById("test-list");
var valid = new Set(["JavaScript", "HTML", "CSS"]);
for(var i=0;i<list.children.length;i++){
    var child = list.children[i];
    if(!valid.has(child.innerText)){
        list.removeChild(child);
        i--;//子节点总数已变化
    }
}
var list = document.getElementById("test-list");
for(var i=0;i<list.children.length;i++){
    var child=list.children[i].innerHTML;
    alert(child);
}

表单

获取文本框中的值

// <input type="text" id="email">
var input = document.getElementById("email");
input.value; // "用户输入的值"

提交表单

方式一是通过元素的submit()方法提交一个表单，例如，响应一个<button>的click事件，在JavaScript代码中提交表单：

<!-- HTML -->
<form id="test-form">
<input type="text" name="test">
<button type="button" onclick="doSubmitForm()">Submit</button>
</form>

<script>
function doSubmitForm() {
var form = document.getElementById("test-form");
// 可以在此修改form的input...
// 提交form:
form.submit();
}
</script>

第二种方式是响应本身的onsubmit事件，在提交form时作修改：

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var form = document.getElementById("test-form");
    // 可以在此修改form的input...
    // 继续下一步:
    return true;
}
</script>

注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。

使用MD5来传输口令

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var pwd = document.getElementById("password");
    // 把用户输入的明文变为MD5:
    pwd.value = toMD5(pwd.value);
    // 继续下一步:
    return true;
}
</script>

这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个变成32个（因为MD5有32个字符）。

要想不改变用户的输入，可以利用<input type="hidden">实现：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var input_pwd = document.getElementById("input-password");
    var md5_pwd = document.getElementById("md5-password");
    // 把用户输入的明文变为MD5:
    md5_pwd.value = toMD5(input_pwd.value);
    // 继续下一步:
    return true;
}
</script>

注意到id为md5-password的<input>标记了name=”password”，而用户输入的id为input-password的<input>没有name属性。没有name属性的<input>的数据不会被提交。

利用JavaScript检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单：
- 用户名必须是3-10位英文字母或数字；
- 口令必须是6-20位；
- 两次输入口令必须一致。

<!-- HTML结构 -->
<form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()">
    <p id="test-error" style="color:red"></p>
    <p>
        用户名: <input type="text" id="username" name="username">
    </p>
    <p>
        口令: <input type="password" id="password" name="password">
    </p>
    <p>
        重复口令: <input type="password" id="password-2">
    </p>
    <p>
        <button type="submit">提交</button> <button type="reset">重置</button>
    </p>
</form>

    "use strict"
    var checkRegisterForm=function(){
        // TODO:获取用户名、口令、重复口令标签中的值
        var username=document.getElementById("username").value;
        var password=document.getElementById("password").value;
        var password2=document.getElementById("password-2").value;
        //判断用户名是否符合规则
        var regUsername=/^[w]{3,10}$/;
        var flag1=regUsername.test(username);
        //判断口令是否符合规则
        var regPassword=/^.{6,20}$/;
        var flag2=regPassword.test(password);
        //判断两次口令输入是否相同
        var flag3=password===password2?true:false;
        if(flag1&&flag2&&flag3){
            return true;
        }else{
            return false;
    }

}

操作文件

在HTML表单中，可以上传文件的唯一控件就是<input type="file">。

注意：当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

var f = document.getElementById("test-file-upload");
var filename = f.value; // "C:fakepath	est.png"
if (!filename || !(filename.endsWith(".jpg") || filename.endsWith(".png") || filename.endsWith(".gif"))) {
    alert("Can only upload image file.");
    return false;
}

上传图片

<form method="post" action="http://localhost/test" enctype="multipart/form-data">
    <p>图片预览：</p>
    <p></p><div id="test-image-preview"
                style="border: 1px solid #ccc; width: 100%; height: 200px; background-size: contain;
                 background-repeat: no-repeat;
                 background-position: center center;"></div>
    <p></p>
    <p>
        <input type="file" id="test-image-file" name="test">
    </p>
    <p id="test-file-info"></p>
</form>

<script>
    var
        fileInput=document.getElementById("test-image-file");
        info=document.getElementById("test-file-info");
        preview=document.getElementById("test-image-preview");

    //监听chang事件
    fileInput.addEventListener("change",function(){
        //清除背景图片
        preview.style.backgroundImage="";
        //检查文件是否选择
        if(!fileInput.value){
            info.innerHTML="没有选择文件";
            return;
        }
        //获取file引用
        var file=fileInput.files[0];
        //获取File信息
        info.innerHTML="文件"+file.name+"<br>"+
                        "大小"+file.size+"<br>"+
                        "修改"+file.lastModifiedDate+"<br>";
        if(file.type!="image/jpeg"&&file.type!="image/png"&&file.type!="image/gif"){
            alert("不是有效的图片文件");
            return;
        }
        //读取文件
        var reader=new FileReader();
        reader.onload=function(e){
            var
                    data=e.target.result;
            preview.style.backgroundImage="url("+data+")";
        }
        //以dataUrl的形式读取文件
        reader.readAsDataURL(file);

    })

</script>

阅读更多