JS操作节点

JS操作元素节点
　　使用 js 创建一个节点然后动态插入到 html 中.

 

Demo: js 创建文本节点

1 //获取div节点
2 var div = document.getElementsByTagName("div")[0];
3 //创建文本节点
4 var textNode = document.createTextNode("文本节点");
5 //将新创建的文本节点追加到div中
6 div.appendChild(textNode);

Demo: 创建元素节点

1 //获取div节点
2 var div = document.getElementsByTagName("div")[0];
3 //创建元素h1节点
4 var elementNode = document.createElement("h1");
5 //为新建的元素节点增加文本内容
6 elementNode.textContent="新建元素节点文本"
7 //将新创建的节点追加到div中
8 div.appendChild(elementNode);

Demo: 使用 insertBefore 实现插入节点
　　使用 insertBefore 可以指定插入节点的位置

 1 //获取div节点
 2 var div = document.getElementsByTagName("div")[0];
 3 //创建元素h1节点
 4 var elementNode1 = document.createElement("h1");
 5 var elementNode2 = document.createElement("h1");
 6 //为新建的元素节点增加文本内容
 7 elementNode1.textContent="使用insertbefore新建元素节点文本"
 8 elementNode2.textContent="使用appendChild新建元素节点文本"
 9 //将新创建的节点追加到div中
10 div.insertBefore(elementNode1,document.getElementsByTagName("p")[0]);
11 div.appendChild(elementNode2);

Demo: 删除节点
该方法是有父节点调用的, 可以删除指定的子节点, 但是不能删除孙子节点.

div.removeChild(document.getElementsByTagName("p")[2]);

Demo: 使用 js 操作 css 样式
html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js 学习</title>
<<style>
    div{
        margin:0 auto;
        height:500px;
        width:90%;
        background-color: grey;
        color:white;
    }
</style>
</head>
<body>
    <center>
        <button type="button" onclick="changeColor('black')">护眼模式</button>
        <button type="button" onclick="changeColor('grey')">护眼模式</button>
        <button type="button" onclick="changeColor('blue')">护眼模式</button>
    </center>
    <div>
        <h1>
            长篇武侠小说!!!
        </h1>
    </div>
</body>
</html>
<script src="index.js"></script>

js:

 1 function changeColor(color){

2 　　document.getElementsByTagName("div")[0].style.backgroundColor=color;

3 } 

posted @ 2019-04-27 21:07  笑长不爱笑QvQ  阅读(150)  评论(0)  编辑  收藏  举报