<!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封装了当前事件的内容。

　　

js之标签操作的更多相关文章

  1. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  2. jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

    一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

  3. JS的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  4. js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型

    js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...

  5. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

  6. js和.net操作Cookie遇到的问题

    Cookie初探1.我理解中的Cookie1.1.Cookie存储位置是客户端的1.2.Cookie存储数据,数据大小也是有限制的 2.Cookie的用法2.1.js对Cookie的操作(网上很多我就 ...

  7. JS的DOM操作语法

    整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  8. day53——标签操作

    day53 今日内容 标签操作 值操作 取值: 文本输入框:$('#username').val(); input,type=radio单选框: $('[type="radio"] ...

  9. jQuery标签操作

    样式操作 样式类操作 //添加指定的css类名 $('元素选择器')addClass('类名'); //移除指定的css类名 removeClass(); //判断样式存不存在 hasClass(); ...

随机推荐

  1. 洛谷 P2296 寻找道路 —— bfs

    题目:https://www.luogu.org/problemnew/show/P2296 第一次用 Emacs 对拍,写了半天: 注意那个 is 赋值的地方很容易错,千万别反复赋值: 一道水题写了 ...

  2. LA3704

    https://vjudge.net/problem/UVALive-3704 参考:http://www.cnblogs.com/iwtwiioi/p/3946211.html 循环矩阵... 我们 ...

  3. gerrit下载

    http://central.maven.org/maven2/com/google/gerrit/gerrit-war/2.11.4/

  4. samba - linux客户端访问samba服务器的指令（转载）

    转自:http://linux.sheup.com/linux/linux5303.htm linux客户端访问samba服务器的指令2004-04-23 15:18 pm来自:Linux文档现载:W ...

  5. SVN请求认证信息

    WIN10:C:\Users\Home目录\AppData\Roaming\Subversion Window Server 系统:C:\Users\Home目录\AppData\Roaming\Su ...

  6. Ruby和Swift的Range

     意义  Swift  Ruby  [1, 2, 3, 4, 5]  1...5  1..5  [1, 2, 3, 4]  1..<5   1...5                       ...

  7. [Swift]Array数组的swapAt函数

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. moiezen

    这题是个随机化+二分裸题--------考场上居然没有想出来--想的出来就怪了吧 我们随机一下增加x的顺序,然后进行二分之前,看看这个x加完之后能不能更新答案,不能就不二分了.具题解所说,这个复杂度是 ...

  9. linux编译安装gcc5.3.0

    1.下载GCC5.3.0安装包 #su #cd /opt #wget http://ftp.gnu.org/gnu/gcc/gcc-5.3.0/gcc-5.3.0.tar.gz 2.解压 #.tar. ...

  10. 用 jQuery 实现简单倒计时功能

    问题场景:假设某个活动截止时间给定了,现在需要开发一个页面可以自动刷新距离活动截止时间还剩多少天? <!DOCTYPE html> <html xmlns="http:// ...