JS11

来源：互联网发布：福州天趣网络编辑：程序博客网时间：2024/06/07 09:02

11.1 DOM概念

DOM（Document Object Model）：文档对象类型

整个文档是由一系列节点对象组成的

节点（Node）包括元素节点、属性节点和文本节点

var th1 = document.getElementById("th1");
alert(th1.nodeType); 元素节点1
alert(th1.nodeName); 标签名：th
alert(th1.nodeValue); 节点值：null

var attrl = th1.getAttributeNode("name");
alert(attrl.nodeType); 属性节点2
alert(attrl.nodeName); 属性名：name
alert(attrl.nodeValue); 节点值：breed

var txt1 = th1.firstChild;
alert(txt1.nodeType); 文本节点3
alert(txt1.nodeName); 节点名称：#text
alert(txt1.nodeValue); 节点值：种类

11.2 获取元素

（1）getElementById

根据元素的id属性来获取元素，获取到一个元素

（2）getElementByTagName

根据标签名来获取元素，结果是一个元素集合

（3）getElementByClassName

根据class属性来获取元素，结果是一个元素合集

（4）getElementByName

根据name属性来获取元素，结果是一个元素合集

只有Id属性获取结果为一个元素

document对象支持四种以上，而element对象仅支持getElementByTagName和getElementByClassName

11.3 修改元素

修改内容

通过innerText属性读取或设置标签的内部文本

或通过innerHTML，区别在于后者会按照html规则解析文本，而前者不会

修改样式

a. xxx.style.yyy

b. xxx.classname = “……”（相当于修改class属性）

11.4 添加删除元素

（1）createElement创建一个元素节点

（2）createTextNode创建一个文本节点

（3）appendChild添加子节点

（4）removeChild删除子节点

<body>
    <div id="div1">

    </div>
    <input type="button" value="添加段落" onclick="add()">
</body>
<script>
    var index = 1;
    function add(){
        var p = document.createElement("p");
        var content = "第"+index+"段落";
        var txt =document.createTextNode(content);
        p.appendChild(txt);
        var txt1 = document.getElementById("div1");
        div1.appendChild(p);
        index++;
    }
</script>
</html>

添加时通过设置class属性

<div id="div1">

</div>
<input type="button" value="添加段落" onclick="add()">
<input type="button" value="删除奇数段" onclick="de1()">
</body>
<script>
    var index = 1;
    function add() {
        var p = document.createElement("p");
        var content = "第" + index + "段落";
        var txt = document.createTextNode(content);
        p.appendChild(txt);
        if (index % 2 == 1) {
            p.setAttribute("class", "odd");
        }
        var div1 = document.getElementById("div1");
        div1.appendChild(p);
        index++;
    }
    function de1() {
        var div1 = document.getElementById("div1");
//        var paras = div1.getElementsByName("odd");
        var paras = div1.getElementsByClassName("odd");
        for (var i = paras.length - 1; i >= 0; i--) {
            div1.removeChild(paras[i]);
        }
    }
</script>

11.5导航

document是根节点

parentNode获取父节点

childNode获取所有子节点

firstchild第一个子节点

lastchild最后一个子节点

阅读全文

0 0