<!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. Python Tricks（十九）—— switch 的实现

    python 原生语法不支持 switch,体现了 Python 大道至简的设计思路,有时为了避免啰嗦的 if elif等判断语句,我们可以用字典来代替 switch 的各分支,也即建立表达式和操作的 ...

  2. 前端性能调优Gzip Filter

    转自:https://blog.csdn.net/zxk15982106569/article/details/18922613 客户端向web服务器端发出了请求后,通常情况下服务器端会将页面文件和其 ...

  3. mysql 的索引hash和b+tree 区别

    索引hash相当于数组,键值对组合,对于id = 6或者status= 2这样条件查询,但是对于id>12等这样,用btree索引最好.

  4. 51nod1344 走格子

    1344 走格子 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 有编号1-n的n个格子,机器人从1号格子顺序向后走,一直走到n号格子,并需要从n号格 ...

  5. 记录一次mysql导入千万条测试数据过慢的问题！

    数据库在没有做任何优化的情况下,使用存储过程,插入1千万条测试数据. CREATE PROCEDURE addmaxdata(IN n int) BEGIN DECLARE i INT DEFAULT ...

  6. TCP/IP与Http与socket的关系

    1 理清概念: TCP/IP是一个大的协议族(只不过TCP和IP是super star所以就这么命名了),它包括了: 应用层协议:FTP.HTTP.TELNET.SMTP.DNS(协议): 传输层协议 ...

  7. 388 Longest Absolute File Path 最长的绝对文件路径

    详见:https://leetcode.com/problems/longest-absolute-file-path/description/ C++: class Solution { publi ...

  8. Firebug

    Firebug是网页浏览器火狐下的一款开发类插件,它集HTML查看和编辑.JavaScript控制台.网络状态监视器于一体,是开发JavaScript.CSS.HTML和Ajax的得力助手.F12打开 ...

  9. Js onmouseover和onmouseout小特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  10. re.S解析

    转自:https://www.cnblogs.com/xieqiankun/p/re-sinpython.html 在Python的正则表达式中,有一个参数为re.S.它表示“.”(不包含外侧双引号, ...