web前端学习（四）JavaScript学习笔记部分（7）-- JavaScript DOM对象控制HTML元素详解

1、方法

getElementsByName() 获取name 可以获取一个数组类型数据（参数加引号）
getElementsByTagName() 获取元素  
getAttribute() 获取元素属性 获取元素的变量调用这个方法，（参数为元素属性）
setAttribute() 设置元素属性  
childNodes() 访问子节点 子节点可以有很多个
parentNode() 访问父节点 父节点只有一个
createElement() 创建元素节点  
createTextNode() 创建文本节点  
insertBefore() 插入节点  
removeChild() 删除节点  
offsetHeight()、offsetWidth() 网页尺寸 不包含滚动条的宽度、高度
scrollHeight()、scrollWidth() 网页尺寸 包含滚动条的宽度、高度

子节点，父节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>节点1</li>阿范德萨发
    <li>节点2</li>
    <li>节点3</li>
    <li>节点4</li></ul>
<script>
    function getChildNode(){
        var childnode = document.getElementsByTagName("ul")[0].childNodes;
        alert(childnode.length);/*空格区域也算一个节点*/
        alert(childnode[1]);/*会打印出节点的类型*/
        alert(childnode[1].innerHTML);/*打印出节点的内容*/
        alert(childnode[2]);/*打印出内容：object Text*/
        alert(childnode[1].nodeType);
    }
    getChildNode();
</script>
</body>
</html>

appendChild,insertBefore

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <p id="pid">div的元素</p>
</div>
<script>
    function createNode(){
        var body = document.body;
        var input = document.createElement("input");
        input.type = "button";
        input.value = "按钮";
        body.appendChild(input);/*向body的末尾添加一个元素*/
    }

    function addNode(){
        var div = document.getElementById("div");
        var node = document.getElementById("pid");
        var newnode = document.createElement("p");
        newnode.innerHTML = "动态添加一个p元素";
        div.insertBefore(newnode,node);/*在。。。之前添加一个元素*/
    }
    createNode();
    addNode();
</script>
</body>
</html>

removeNode:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <p id="pid">div的元素</p>
</div>
<script>
    function removeNode(){
        var div = document.getElementById("div");
        var p = div.removeChild(div.childNodes[1]);
    }
    removeNode();/*什么都不输出就对了*/
</script>
</body>
</html>

offsetHeight:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <p id="pid">div的元素</p>
</div>
<script>
    function getSize(){
        var width = document.documentElement.offsetWidth||document.documentElement.offsetWidth;
        /*这样写会让所有浏览器兼容*/
        var height = document.documentElement.offsetHeight;
        alert(width+","+height);
    }
    getSize();/*什么都不输出就对了*/
</script>
</body>
</html>

 

posted @ 2018-12-08 21:46  林丶  阅读(215)  评论(0)  编辑  收藏  举报