javaScriptDOM基础

最新推荐文章于 2024-09-25 14:35:25 发布

天天不在线

最新推荐文章于 2024-09-25 14:35:25 发布

阅读量323

点赞数

分类专栏： javascript evnet 文章标签： javascript css dom onclick onmouse

javascript 同时被 2 个专栏收录

2 篇文章

订阅专栏

evnet

1 篇文章

订阅专栏

基本的DOM查找方法

document.getElementById(“id”)
document.getElementsByTagName(“tag”):返回值为数组
ul#list1>li*3+tab键：sublime中快速生成里列表

设置样式

语法：ele.style.styleName=styleValue
styleName：必须是驼峰命令形式

<body>
    <div class="box" id="box">
        元素
    </div>
    <ul id="list1">
        <li>前端开发</li>
        <li>服务器端开发</li>
        <li>UI设计</li>
    </ul>
    <ol>
        <li>javaScript原生</li>
        <li>javaScript框架</li>
    </ol>
    <script type="text/javascript">
        var box = document.getElementById("box");
        // 设置文字颜色  设置样式
        box.style.color='#f00';
        box.style.fontWeight='bold';
        console.log(box);
        var lis = document.getElementsByTagName("li");
        console.log(lis.length);
        //获取id为list1下所有的li
        var list2 = document.getElementById("list1").getElementsByTagName("li");
        console.log(list2.length);
        //遍历元素设置样式
        for(var i=0,len=list2.length;i<len;i++){
            // console.log(list2[i]);
            list2[i].style.color = "#00f";
            if(i==0){
                list2[i].style.backgroundColor='#ccc';
            }else if(i==1){
                list2[i].style.backgroundColor='#ff0';
            }else if(i==2){
                list2[i].style.backgroundColor='#999';
            }else{
                list2[i].style.backgroundColor='#333';
            }
        }
    </script>
</body>

ele.innerHTML:读取或者写入标签之间的文本和Html内容
ele.className:设置或者获取class属性

console.log(list2[i].innerHTML);
list2[i].className="current";

获取属性与添加属性
ele.getAttribute(“attribute”):获取自定义属性只能用这个方法
ele.attributeName:如果是标签自带的属性，可以直接‘.属性名’获取，class属性，需要.calssName来获取。
ele.setAttribute(‘attribute’,value):

p.setAttribute("data-color","red");

删除属性
ele.removeAttribute(“attribute”)

DOM事件

HTML事件：直接在HTML元素上编写执行脚本的事件
onmouseover:鼠标滑过事件
onmouseout:鼠标离开时事件
onload:页面加载时触发
this:触发事件的元素的引用，可以通过函数参数传进来。onmouseover(this)
DOM0级事件:通过DOM获取元素，然后在元素上添加事件
ele.事件=执行脚本

function abc(){}
ele.onclick=function(){
    console.log(this);
}
ele.onclick=abc;
//当页面元素加载完毕后，再加载onload里面的内容
<script>
window.onload=function(){
    var phone = document.getElementById("phone");
    phone.onblur=function(){
        //获取元素的值
        var phoneVal = this.value;
        //isNaN():判断是否为非数字
        if(isNaN(phoneVal)){
            //根据条件动态显示图片
            tip.innerHTML='<img src="">';
        }
    }
}
</script>


//placeholder属性
<body>
    <div class="box">
        <input type="text" id="phone" placeholder="请输入手机号码">
    </div>
    <div class="tip">
        请输入有效手机号码
    </div>
</body>

给select标签添加onchange事件

<script type="text/javascript">
    window.onload=init;
    function init(){
        //获取下来菜单
        var menu = document.getElementById("menu");
        //给菜单绑定change事件 一般作用于select或checkbox或radio
        menu.onchange=function() {
            var bgcolor=this.value;//获取选中的下来选项框的值
            //获取选中的下来选项框的值
            var bgcolor=menu.options[menu.selectedIndex].value;
            if(bgcolor=="#f00"){
                //设置样式
                document.body.style.background=bgcolor;
            }else{
                document.body.style.background="#fff";
            }
        }
    }
</script>

<div class="box">
    请选择你喜欢的颜色
    <select name="" id="menu">
        <option value="">请选择</option>
        <option value="#f00">红色</option>
        <option value="#0f0" selected="">绿色</option>
    </select>
</div>

onsubmit:表单中的确认按钮被点击时发生，加在form标签上的
onmousedown:
onmouseup:
onresize:
onscroll:

<style>
    body{
        height:2000px;
    }
    .box{
        width:200px;
        height:200px;
        background:#f00;
        overflow:auto;//当内容超出范围后，会出现滚动条
    }
</style>

<script>
    var box = document.getElementById("box");
    //鼠标按下事件
    box.onmousedown=function(){}
    //鼠标移动事件
    box.onmousemove=function(){}
    //鼠标松开事件
    box.onmouseup=function(){}
    //鼠标onclikc事件
    box.onclick=function(){}
    //onresize:调整浏览器大小的时候触发
    window.onresize=function(){
        console.log('尺寸改变了');
    }
    //onscroll:拖动滚动条滚动时触发
    window.onscroll=function(){}
    box.onscroll=function(){}
</script>

<body>
    <div class="box" id="box">拖动</div>
</body>

键盘事件

onkeydown:按下一个键盘按键时触发
onkeypress:在键盘键被按下被释放的时候触发
onkeyup:在键盘按键被松开是发生
keyCode:返回键盘按键事件返回的键的字符
提示还有多少文字可以输入

<style>
    .text span{font-weight:bold;color:#f00;}
    em{font-style:normal;}
</style>

<script>
    //在事件触发的时候，用一个对象接收事件对象
    document.onkeydown=function(event){
        //console.log(event.keyCode);
    }
    //提示还有多少文字可以输入
    var text = doucment.document.getElementById("text");
    var total=30;
    var count=doucment.document.getElementById("count");
    document.onkeyup=function(){
        //获取文本框值的长度
        var len=text.value.length;
        var allow=total-len;
        count.innerHTML=allow;
    }
</script>

<div class="input">
    <p class="text">你还可以输入<span><em id="count">30</em>/30</span></p>
    <textarea name="" id="text" cols="30" rows="10">

    </textarea>
</div>