[知了堂学习笔记]_JS的DOM基本操作

最新推荐文章于 2017-12-09 18:12:40 发布

YX_车车

最新推荐文章于 2017-12-09 18:12:40 发布

阅读量236

点赞数

文章标签： dom js

本文链接：https://blog.csdn.net/yxuan9826/article/details/78754073

版权

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php
1.DOM全称：
document object model，文档对象模型
2.DOM的意义：
通过js让网页中的元素变成对象，通过面向对象的操作的放式来改变网页中元素的样式和属性。
3.HTML DOM节点
每一个文档是文档节点。
每一个HTML元素是元素节点。
HTML元素内的文本是文本节点。
每个HTML属性是属性节点。
注释是注释节点。
4.查找HTML元素
4.1要想使用js去操作HTML中的元素，首先必须找到该元素。
4.2找到元素的方法
4.2.1通过id来找HTML元素（getElementById()）
4.2.2通过标签名找到HTML元素（getElementsByTagName()）
4.2.3通过类名找到HTML元素（getElementsByName()）
5.改变HTML内容
5.1 改变HTML中的内容最简单的方式是使用innerHTML属性
5.2 除了innerHTML属性，还有innerText属性，该属性只能改变HTML中的文本内容。
document. getElementById(id).innerHTML = 新的HTML
document. getElementById(id).innerText = 新的文档内容
6.改变HTML样式
6.1 改变HTML元素的样式
document. getElementById(id).style.property = 新样式
6.2 加入css样式表
document. getElementById(id).className = “类名”
7.创建HTML元素节点
7.1在创建节点时需要利用document.createElement(节点名称)
7.2HTML是一个文档树，每个HTML元素之间必然有子父关系。将新创建好的元素节点加入到文档中需要利用node.appendChild（节点对象）
这里写图片描述
8.删除HTML元素节点
9.DOM基础操作案例
css部分：

    <style>
        main{
            position: absolute;
            width: 400px;
            height: 400px;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
            border: 1px solid black;
        }
        .top{
            width: 100%;
            height: 50px;
            background: green;
            text-align: center;
            color: white;
            line-height: 50px;
        }
        .drawing{
            position: relative;
            width: 150px;
            height: 200px;
            top: -50px;
            left: 400px;
        }
        span{
            text-align: center;
            border-radius: 5px;
            border: 1px solid black;
            padding: 5px;
        }
        p{
            text-align: center;
        }
        .content{
            position: absolute;
            width: 50px;
            height: 50px;
            border: 1px solid black;
            border-radius: 5px;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
        }
    </style>

body部分：

<body>
<div class="main">
    <div class="top">点击画板</div>
    <div class="drawing">
        <p>选择颜色</p>
        <p>
            <span style="background: red;" id="c01">红色</span>
            <span style="background: yellow;" id="c02">黄色</span>
            <span style="background: blue;" id="c03">蓝色</span>
        </p>
        <p>选择宽度</p>
        <p>
            <span id="s01">100</span>
            <span id="s02">150</span>
            <span id="s03">200</span>
        </p>
        <p>选择高度</p>
        <p>
            <span id="h01">100</span>
            <span id="h02">150</span>
            <span id="h03">200</span>
        </p>
    </div>
</div>
<div class="content" id="content"></div>
</body>

js部分：

<script>
    var c01 = document.getElementById("c01");
    var c02 = document.getElementById("c02");
    var c03 = document.getElementById("c03");
    var h01 = document.getElementById("h01");
    var h02 = document.getElementById("h02");
    var h03 = document.getElementById("h03");
    var s01 = document.getElementById("s01");
    var s02 = document.getElementById("s02");
    var s03 = document.getElementById("s03");

    c01.onclick = function(){
        var content = document.getElementById("content")
        content.style.background = "red";
    };
    c02.onclick = function(){
        var content = document.getElementById("content")
        content.style.background = "yellow";
    };
    c03.onclick = function(){
        var content = document.getElementById("content")
        content.style.background = "blue";
    };
    h01.onclick= function(){
        var content = document.getElementById("content");
        content.style.height = 100+"px";
    };
    h02.onclick= function(){
        var content = document.getElementById("content");
        content.style.height = 150+"px";
    };
    h03.onclick= function(){
        var content = document.getElementById("content");
        content.style.height = 200+"px";
    };
    s01.onclick= function(){
        var content = document.getElementById("content");
        content.style.width = 100+"px";
    };
    s02.onclick= function(){
        var content = document.getElementById("content");
        content.style.width = 150+"px";
    };
    s03.onclick= function(){
        var content = document.getElementById("content");
        content.style.width = 200+"px";
    };
</script>

10.DOM事件
10.1事件的概念
JavaScript事件就是为了去执行我们已经定义好的函数方法。
Js可以让HTML具备动作或行为，所以为了让这个动作或者行为能够执行，就需要事件。
例如：按钮点击事件，鼠标移动事件….
10.2事件如何使用
10.2.1HTML事件属性，也就是在HTML标签元素中加入事件属性，一般事件属性以onXXX=”函数名称”

Function show（）{}
<button onclick=”show()”></button>

10.2.2使用HTML DOM来分配事件

Onclick = javascript;

10.3事件分类
10.3.1鼠标事件
这里写图片描述
10.3.2键盘事件

10.3.3表单事件

10.3.4拖动事件

下面我们来写一个demo，这个demo包括Js的DOM事件，和前面所学的知识的一个小小的总结：
许愿墙demo
css样式：

 <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html{
            width: 100%;
            height: 100%;
        }
        body{
            width: 100%;
            height: 100%;
            background: -webkit-linear-gradient(top,rgb(203,235,219),rgb(55,148,192));
        }
        #container{
            width: 100%;
            height: 80vh;
            position: relative;
            outline: 1px solid black;
            z-index: 0;
        }
        #input{
            width: 400px;
            height: 40px;
            display: block;
            margin: 30px auto;
            font-size: 18px;
            padding: 0 10px;
        }
        .items{
            width: 200px;
            position: absolute;
            padding: 30px 10px 10px;
            -webkit-border-bottom-left-radius: 20px 500px;
            -webkit-border-bottom-right-radius: 500px 30px;
            -webkit-border-top-right-radius: 5px 100px;
            bos-shadow:0 2px 10px 1px rgba(0,0,0,0.2);
        }
        .items p{
            width: 100%;
            min-height: 80px;
            word-break: break-all;
        }
        .items span{
            float: right;
            margin: 10px 10px 0 0;
            color: white;
            font-size: 14px;
        }
        .items span:hover{
            cursor: pointer;
        }
    </style>

body样式：

<body>
<div id="container"></div>
<input id="input" type="text" placeholder="许愿个愿吧，反正不知道能不能实现╮(╯▽╰)╭">
</body>

js样式：

<script>
    var input,container;
    window.onload = function(){
        input = document.getElementById("input");
        container = document.getElementById("container");
        input.onkeydown = function(e){
            if(e.keyCode=='13'){
                var v = input.value;
                if(v){
                    createItems(v);
                    input.value="";
                    input.setAttribute("placeholder","许愿个愿吧，反正不知道能不能实现╮(╯▽╰)╭");
                }
            }
        }
    }
    //创建一个许愿墙贴
    function createItems(text){
        var color = getRandomColor();
        var positionX = getRandomPosition("x");
        var positionY = getRandomPosition("y");
        var newDiv = '<div class="items" style="background-color:'+color+';top:'+positionY+'px;left:'+positionX+'px;">' +
                '<p>'+text+'</p>' +
                '<span class="closeTabs">关闭</span>' +
                '</div>';
        container.innerHTML+=newDiv;
    }
    //获取随机颜色
    function getRandomColor(){
        var c = "0123456789abcdef";
        var color = "";
        while(color.length<6){
            color +=c[Math.floor(Math.random()*16)];
        }
        return "#"+color;
    }
    //获取随机定位
    //随机的X，或者随机的Y
    function getRandomPosition(p){
        var position;
        switch (p){
            case 'x':
                position = Math.ceil((Math.random()*900));
                if(position>0&&position<container.clientWidth-220){
                    return position;
                }else{
                    return getRandomPosition(p);
                }
                break;
            case 'y':
                position = Math.ceil((Math.random()*600));
                if(position>0&&position<container.clientHeight-260){
                    return position;
                }else{
                    return getRandomPosition(p);
                }
                break;
            default :
                break;
        }
    }
</script>

YX_车车

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[知了堂学习笔记]_JS的DOM基本操作

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php 1.DOM全称： document object model，文档对象模型 2.DOM的意义：通过js让网页中的元素变成对象，通过面向对象的操作的放式来改变网页中元素的样式和属性。 3.HTML DOM节点每一个文档是文档节点。每一个HTML元素是元素节点。 HTML元
复制链接

扫一扫