JavaScript - DOM相关

 

DOM节点分类 ( node ) : 

　　元素节点 ( element node )

　　属性节点 ( attribute node )

　　文本节点 ( text node)

 

DOM的相关操作 : 

 

1. 查询元素

<script>
    
    window.onload = function() {
        
        // 1. 直接获取元素节点
        
        // 通过id属性获取指定元素, 返回一个节点对象
        var ele = document.getElementById("username");
        console.log(ele);
        
        // 通过name属性获取元素, 返回多个节点对象(数组)
        var eles = document.getElementsByName("hobby");
        for (var i=0; i<eles.length; i++) {
            console.log(eles[i]);
        }
        
        // 通过标签名获取元素, 返回多个节点对象(数组)
        var tagEles = document.getElementsByTagName("input");
        for (var i=0; i<tagEles.length; i++) {
            console.log(tagEles[i]);
        }
        
        // 2. 间接获取元素节点, 根据层次关系查找
        
        // 同过获取的元素节点, 查找父元素节点
        var selEle = document.getElementById("son").parentElement;
        console.log(selEle);
        
        // 通过获取的元素节点, 查找子元素节点, 返回所有子节点(数组)
        // childNodes : 返回节点的子节点集合, 包括元素节点,文本节点和属性节点
        // children : 只返回节点的子元素集合
        // var childEles = document.getElementById("father").childNodes;
        var childEles = document.getElementById("father").children;
        for (var i=0; i<childEles.length; i++) {
            console.log(childEles[i]);
        }
        
        // 获取元素的第一个子节点和最后一个子节点
        // firstChild, lastChild : 获取的子元素包含元素节点, 文本节点和属性节点
        // firstElementChild, lastElementChild : 只会获取到子元素
        var childFirst = document.getElementById("father").firstElementChild;
        var childLast = document.getElementById("father").lastElementChild;
        console.log(childFirst);
        console.log(childLast);
        
        // 3. 获取兄弟节点
        
        // 获取元素的上一个元素和下一个元素
        var preEle = document.getElementById("brother").previousElementSibling;
        var nextEle = document.getElementById("brother").nextElementSibling;
        console.log(preEle);
        console.log(nextEle);
        
    };
    
</script>

<input type="text" id="username" value="Tom" />

<input type="checkbox" name="hobby" value="aaa" />
<input type="checkbox" name="hobby" value="bbb" />
<input type="checkbox" name="hobby" value="ccc" />

<select id="father">
    <option id="son" value="1">111</option>
    <option id="brother" value="2">222</option>
    <option value="3">333</option>
</select>

 

2. 操作文本

<script>
    
    window.onload = function() {
        
        // 操作文本

        var ele = document.getElementById("txt");
        
        // 获取文本
        console.log(ele.innerHTML); // innerHTML : 获取内容包括标签
        console.log(ele.innerText); // innerText : 获取内容不包括标签
        
        // 插入文本
        ele.innerHTML = "<h3>Hello</h3>"; // innerHTML : 插入文本时, 会解析标签
        ele.innerText = "<h3>Hello</h3>"; // innerText : 插入文本时, 不会解析标签
        
    };
    
</script>

<h1 id="txt">
    <span>Hello,World!</span>
</h1>

 

3. 操作属性

<script>
    
    function editButton() {
        
        // 操作元素的属性
        
        var btn = document.getElementById("btn");
        
        // 点(btn.a)的形式获取和修改元素的属性, 只能操作元素自带的属性, 不能操作自定义属性
        // 操作属性可以用 setAttribute() 和 getAttribute();
        
        // 获取元素属性
        console.log(btn.value);
        console.log(btn.a); // 不能获取自定义属性
        console.log(btn.getAttribute("value"));
        console.log(btn.getAttribute("a")); 
        
        // 修改元素属性
        btn.value = "Hello, JavaScript";
        btn.a = "c"; // 修改不了自定义属性
        console.log(btn);
        btn.setAttribute("value", "Attribute");
        btn.setAttribute("a", "d");
        
    }
    
</script>

<input id="btn" type="button" a="b" value="Hello,World" onclick="editButton()" />

 

4. 操作元素

// 操作元素

// 创建节点
document.createElement("nodeName");

// 添加节点
parentNode.appendChild(childNode); // 在末尾添加
parentNode.insertBefore(newNode, beforeNode); // 在指定节点前添加

// 删除节点
parentNode.removeChild(childNode);

// 替换节点
parentNode.replaceChild(newNode, oldNode);

 

5. 操作CSS样式

<style>
    .cls { color: red; }
</style>

<script>
    window.onload = function() {
        // 操作CSS样式
        var s = document.getElementById("a").style; // 获取到元素的style对象
        s.color = "green"; // style对象的属性和CSS的属性相对应
        s.fontSize = "30px"; // 多个单词组成的属性, 需使用驼峰写法

        // 操作元素的class属性, 应使用className
        var s2 = document.getElementById("b");
        s2.className = "cls";
    }
</script>

<span id="a">aaa</span>
<span id="b">bbb</span>