<!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. [Codeforces 425A] Sereja and Swaps

    [题目链接] https://codeforces.com/contest/425/problem/A [算法] 枚举最终序列的左端点和右端点 , 尝试用这段区间中小的数与区间外大的数交换 时间复杂度 ...

  2. dubbo作者讲编码原则

    刚看到梁飞谈到dubbo为保证代码质量开发人员必须要注意的,其实也是开发人员应该做的. 1. 防止空指针和下标越界 这是我最不喜欢看到的异常,尤其在核心框架中,我更愿看到信息详细的参数不合法异常, 这 ...

  3. bzoj1999 (洛谷1099) 树网的核——dfs

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1999  https://www.luogu.org/problemnew/show/P109 ...

  4. IJ：Eclipse快捷键大全

    ylbtech-IJ:Eclipse快捷键大全 1.返回顶部 1. Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加 ...

  5. Same Tree 序列化二叉树

    https://oj.leetcode.com/problems/same-tree/ Given two binary trees, write a function to check if the ...

  6. （快速幂）51NOD 1046 A^B Mod C

    给出3个正整数A B C,求A^B Mod C.   例如,3 5 8,3^5 Mod 8 = 3. Input 3个正整数A B C,中间用空格分隔.(1 <= A,B,C <= 10^ ...

  7. FFT学习及简单应用(一点点详细)

    什么是FFT 既然打开了这篇博客,大家肯定都已经对FFT(Fast Fourier Transformation)有一点点了解了吧 FFT即为快速傅里叶变换,可以快速求卷积(当然不止这一些应用,但是我 ...

  8. 385 Mini Parser 迷你解析器

    Given a nested list of integers represented as a string, implement a parser to deserialize it.Each e ...

  9. Flume中的flume-env.sh和log4j.properties配置调整建议（图文详解）

    GC是内存的回收的意思. Flume中的flume-env.sh配置调整建议 [hadoop@master conf_HostInterceptor]$ pwd /home/hadoop/app/fl ...

  10. scla-基础-函数-元组(0)

    //元组 class Demo2 extends TestCase { def test_create_^^(){ val yuana = (1,true,1.2,"c",&quo ...