js之标签操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a id='i1' href="http://www.baidu.com"> baidu</a>
    <div id='i2'>helloworld</div>
    <div id="i3" style="position: fixed;top :100px;left: 100px">div2</div>
    <div>
        <form id="form" action="" method="post" enctype="multipart/form-data">
            <input type="text" name="user"/>
            <input type="password" name="password"/>
            <input type="submit" value="login"  />
            <input type="radio" onclick="f()"  > login</input>
        </form>
    </div>
</body>
<script>
    //创建标签
    var tag=document.createElement('div');
    tag.innerText='randomlee';
    tag.className='c1';
    console.log(tag);
</script>


<script>
    //插入标签
    var obj = document.getElementById('i1');
    var beforeBegin="<a>beforeBegin</a>";
    var afterBegin="<a>afterBegin</a>";
    var beforeEnd="<a>beforeEnd</a>";
    var afterEnd="<a>afterEnd</a>";

    //在目标便签前插入一个便签  例：<a>beforeBegin</a>     <a id='i1' href="http://www.baidu.com"> baidu</a>
    obj.insertAdjacentHTML("beforeBegin",beforeBegin);
    //在目标便签text前面插入一个便签     例：<a id='i1' href="http://www.baidu.com"> <a>afterBegin</a> baidu</a>
    obj.insertAdjacentHTML('afterBegin',afterBegin);
    //在目标便签text后面插入一个便签  例: <a id='i1' href="http://www.baidu.com"> baidu <a>beforeEnd</a></a>
    obj.insertAdjacentHTML('beforeEnd',beforeEnd);
    //在目标便签后插入一个便签          例:    <a id='i1' href="http://www.baidu.com"> baidu</a><a>afterEnd</a>
    obj.insertAdjacentHTML('afterEnd',afterEnd);
</script>

<script>
    //样式操作
    var tag=document.getElementById('i2');

    tag.style.color='red';
    tag.style.backgroundColor='green';
    tag.style.height='100px';
</script>

<script>
    //位置操作
    /*
    总文档高度
    document.documentElement.offsetHeight

    当前文档占屏幕高度
    document.documentElement.clientHeight

    自身高度
    tag.offsetHeight

    距离上级定位高度
    tag.offsetTop

    父定位标签
    tag.offsetParent

    滚动高度
    tag.scrollTop
    */
    /*
        clientHeight -> 可见区域：height + padding
        clientTop    -> border高度
        offsetHeight -> 可见区域：height + padding + border
        offsetTop    -> 上级定位标签的高度
        scrollHeight -> 全文高：height + padding
        scrollTop    -> 滚动高度
        特别的：
            document.documentElement代指文档根节点
    */
</script>

<script>
    //提交表单
    function f() {
        document.getElementById('form').submit()
    }
</script>

<script>
    //其他操作
    /*
    console.log                 输出框
    alert                       弹出框
    confirm                     确认框

    // URL和刷新
    location.href               获取URL
    location.href = "url"       重定向
    location.reload()           重新加载

    // 定时器
    setInterval                 多次定时器
    clearInterval               清除多次定时器
    setTimeout                  单次定时器
    clearTimeout                清除单次定时器
    */
</script>

</html>

//事件

对于事件需要注意的要点：

this
event
事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

猜你喜欢