JavaScript DOM

Posted on 2018-06-18 22:31 Brown羊羊阅读(95) 评论(0) 编辑收藏举报

DOM

查找

直接查找 var obj = document.getElementById('i1')

间接查找

文本内容操作：innerText 仅文本

innerText 全内容

value 对于input标签 value获取当前标签中的值

select 获取选中的value值（selectedIndex）

textarea value获取当前标签中的值

样式操作：

className

classList

classList.add

classList.remove

<style>

.c1{

font-size:16px;

color:red;

}

</style>

obj.style.fontSize = '16px'

obj.style.backgroundColor = 'red'

obj.style.color = 'red'

属性操作：

obj.attributes 获取所有属性

obj.setAttribute('xxx','liyang')

obj.removeAttribute('value')

创建标签，并添加到HTML中

a.字符串形式

b.对象的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="AddEle1();" value="+"/>
    <input type="button" onclick="AddEle2();" value="+"/>
<div id="i1">
    <p><input type="text"/></p>
</div>
<script>
    function AddEle1(){
        //创建一个标签
        //将标签添加到i1里面
        var tag = "<p><input type='text' /></p>";
        //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
        document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }

    function AddEle2(){
        //创建一个标签
        //将标签添加到i1里面
        var tag = document.createElement('input');
        tag.setAttribute('type','text');
        tag.style.fontSize = '16px';
        tag.style.color = 'red';
        //创建p标签
        var p = document.createElement('p');
        //将input标签放到p标签里面
        p.appendChild(tag);
        document.getElementById('i1').appendChild(p);
        }

</script>
</body>
</html>

提交表单：

任何标签通过DOM都可以提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="f1" action="http://www.baidu.com">
    <input type="text" />
    <input type="submit" value="提交" />
    <a onclick="submitForm();">点击提交</a>
</form>
<script>
    function submitForm(){
       document.getElementById('f1').submit();
    }
</script>
</body>
</html>

上面可以看到两个input，第一个input用老方法，第二个input用的是DOM

加告警

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="f1" action="http://www.baidu.com">
    <input type="text" />
    <input type="submit" value="提交" />
    <a onclick="submitForm();">点击提交</a>
</form>
<script>
    function submitForm(){
       //document.getElementById('f1').submit();
       alert("告警了");
    }
</script>
</body>
</html>

确认按钮(真的要删除吗)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="f1" action="http://www.baidu.com">
    <input type="text" />
    <input type="submit" value="提交" />
    <a onclick="submitForm();">点击提交</a>
</form>
<script>
    function submitForm(){
       //document.getElementById('f1').submit();
       //alert("告警了");
       var v = confirm("真的要删除吗？");
       console.log(v);
    }
</script>
</body>
</html>

确定返回true，取消返回false

其他操作：

console.log 输出框

alert 弹出框

confirm 确认框

// URL和刷新

location.href 获取URL

location.href = "url" 重定向

location.reload() 重新加载，页面刷新

// 定时器

setInterval 多次定时器

clearInterval 清除多次定时器

setTimeout 单次定时器

clearTimeout 清除单次定时器

基础例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width:600px;margin:0 auto;">
    <input id="i1" onfocus="Focus();" onblur="Blur()" type="text" value="请输入关键字"/>

</div>
<script>
    function Focus(){
    var tag = document.getElementById('i1');
    var val = tag.value;
    if(val == "请输入关键字"){
     tag.value = "";
    }

    }

    function Blur(){
    var tag = document.getElementById('i1');
    var val = tag.value;
    if(val.length == 0){
      tag.value = "请输入关键字";
      }
    }
</script>
</body>
</html>

这个例子等同于：

<input type="text" placeholder="请输入关键字" /> 这是新版本浏览器的功能

事件

onclick onblur onfocus

实现行为（js）样式（css）结构（html）相分离的页面

绑定事件的两种方式：

a.直接标签绑定 onclick='xxx()' onfocus

b.先取Dom队形，然后进行绑定

document.getElementById('xxx').onclick

document.getElementById('xxx').onfocus

this,当前触发事件的标志

a.第一种绑定方式

function ClickOn(self){

self 当前点击的标签

}

b.第二种绑定方式

document.getElementById('i1').onclick = function(){

//this代指当前点击的标签

}

c.第三种绑定方式

var mymain = document.getElemetById("main");

var mycontent = document.getElementById("content");

mymain.addEventListener("click",function(){console.log("main")},true);

mycontent.addEventListener("click",function(){console.log("content")},true);

//true 捕捉（main先出来，content后出来。）；false 冒泡（content先出来，main后出来。底层先打印）

第一种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>


</style>
<body>
<table border="1" width="300px">
    <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>3</td></tr>
    <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>3</td></tr>
    <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
    function t1(n){
    var myTrs = document.getElementsByTagName("tr")[n];
    myTrs.style.backgroundColor = "red";
    }

    function t2(n){
    var myTrs = document.getElementsByTagName("tr")[n];
    myTrs.style.backgroundColor = "";
    }


</script>

</body>
</html>



第二种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>


</style>
<body>
<table border="1" width="300px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
<script>
    var myTrs = document.getElementsByTagName("tr");
    var len = myTrs.length;
    for (var i=0;i<len;i++){
        myTrs[i].onmouseover = function(){
            this.style.backgroundColor = "red";
        }

        myTrs[i].onmouseout = function(){
            this.style.backgroundColor = "";
        }
    }
// 谁调用函数，this就指向谁，这里this就是myTrs[i]



</script>

</body>
</html>

第三种绑定方式（略）

会员力量，点亮园子希望

刷新页面返回顶部