会写代码的咸鱼

http://www.88an.top

阿里云盘资源

网盘资源搜索

“ 梦想还是要有的，万一实现了呢！”

— 马云

5.19-DOM文档

创建时间：2016-10-19

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body id='body'>
    
    </body>
</html>

节点操作

createElement('标签名称') 创建节点标签，得到节点

appendChild('节点') 添加节点标签

var hr = document.createElement("hr");//创建一个hr标签，得到节点
doucment.getElementById("odiv").appendChild(hr);

insertBefore(节点1，节点2) 在指定元素之前添加节点，两个参数

var body = document.getElementById("body");
var hr = document.createElement("hr");//创建一个hr标签
var script = document.getElementById("script");//获取script标签
body.insertBefore(hr,script);//body标签内，在script标签之前插入hr

createTextNode("文本") 创建文本节点

var textNode = document.createTextNode("我是文本");//创建一个文本节点
document.getElementById('body').appendChild(textNode);//将文本节点添加到元素内

removeChild(节点) 删除节点

<body id='body'>
    <div id='box'>测试</div>
    <script>
        var box = document.getElementById('box');//获取需要删除的节点
        document.getElementById('body').removeChild(box);//在父元素上面，移除节点
    </script>
</body>

replaceChild(新节点，旧节点) 替换节点

<body id='body'>
    <div id='box'>测试</div>
    <script>
        var box = document.getElementById('box');//获取需要删除的节点
        var oDiv = document.createElement('hr');//新节点
        document.getElementById('body').replaceChild(oDiv, box);//在父元素上面，替换节点
    </script>
</body>

cloneNode(true|false) 传true 表示复制全部节点传false只复制框架不复制内容

<body id='body'>
    <div id='box'>测试</div>
    <script>
        var box = document.getElementById('box');//获取需要复制的节点
        var noede = box.cloneNode(true);//复制节点
        document.getElementById('body').appendChild(noede);//将复制的节点添加到指定文职
    </script>
</body>

hasChildNodes() 判断是否有子节点

<body id='body'>
    <div id='box1'>测试</div>
    <div id='box2'></div>
    <script>
        //判断box1标签内是否有子节点
        console.log(document.getElementById('box1').hasChildNodes());
        //判断box2标签内是否有子节点
        console.log(document.getElementById('box2').hasChildNodes());
    </script>
</body>

获取节点

getElementById() 通过ID拿到标签

document.getElementById("box").nodeName

getElementsByName() 通过name属性获取标签

<div id='box1' name='box'>测试</div>
<script>
    console.log(document.getElementsByName("box")[0]);
</script>

getElementsByTagName() 通过标签名获取标签

<div id='box1' name='box'>测试</div>
<script>
    console.log(document.getElementsByTagName("div")[0]);
</script>

getElementsByClassName 通过class属性拿到标签

<div id='box1' name='box' class='cl'>测试</div>
<script>
    console.log(document.getElementsByClassName("cl")[0]);
</script>

节点对象-属性

nodeType 节点类型

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

nodeValue 文本节点的值

nodeName 节点的名称

parentNode 节点的父节点

childNodes 节点的所有子节点

firstChild 节点的第一个子节点

lastChild 节点的最后一个子节点

nextSibling 节点的下一下兄弟节点

previousSibling 节点的上一个兄弟节点

style 节点样式

innerHTML 获取节点内容

value 获取表单节点内容

属性操作

getAttribute（）获取节点属性

<div id='box' name='box' class='cl'>测试</div>
<script>
    //获取元素的 class属性
    console.log(document.getElementById("box").getAttribute('class'));//得到 cl
    //获取元素的 name属性
    console.log(document.getElementById("box").getAttribute('name'));//得到 box
</script>

setAttribut(属性名，属性值) 设置节点属性

<div id='box'>测试</div>
<script>
    //设置元素的 class属性
    document.getElementById("box").setAttribute('class','mrchenanan');
</script>

removeAttribute（）移除节点属性

<div id='box'>测试</div>
<script>
    //删除元素的 id属性
    document.getElementById("box").removeAttribute('id');
</script>

样式操作

style

document.getElementById("box").style.width = "100px";
document.getElementById("box").style.backgroundColor = "#a0a";

文本操作

innerHTML

document.getElementsByTagName("div")[0].innerHTML = "dom操作";

value

document.getElementsByTagName("input")[0].value="小强";

上一篇：5.17-JS事件与事件对象

下一篇：5.21-BOM浏览器