<!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. bzoj 1925: [Sdoi2010]地精部落【dp】

    设[f[i][j]为1到i,开头数字是j并且是山峰的方案数 注意到当数字j和j-1不相邻时,交换它们会得到一个新的符合要求的序列,所以f[i][j]+=f[i][j-1]; 如果相邻,那么j是山峰,j ...

  2. bzoj 1791: [Ioi2008]Island 岛屿【基环树+单调队列优化dp】

    我太菜了居然调了一上午-- 这个题就是要求基环树森林的基环树直径和 大概步骤就是找环->dp找每个环点最远能到达距离作为点权->复制一倍环,单调队列dp 找环是可以拓扑的,但是利用性质有更 ...

  3. bzoj 1615: [Usaco2008 Mar]The Loathesome Hay Baler麻烦的干草打包机【bfs】

    直接bfs即可,注意开double,还有驱动和终点的齿轮都在序列里,要把它们找出来= = #include<iostream> #include<cstdio> #includ ...

  4. 10.11NOIP模拟题(3)

    /* 可以看出,对于一段区间[L,R]如果统计了答案 若a[L]<a[R],那么当右端点往左移时答案不会更优,a[R]>a[L]同理 所以两个指针分别从头尾往中间扫那边小移哪边即可. */ ...

  5. 【BZOJ2525】[Poi2011]Dynamite(二分，树形dp)

    [BZOJ2525][Poi2011]Dynamite Description Byteotian Cave的结构是一棵N个节点的树,其中某些点上面已经安置了炸.药,现在需要点燃M个点上的引线引爆所有 ...

  6. lodop 打印

    使用Lodop打印: 一.在官网下载http://www.lodop.net/download.html 若是安装还是提示未安装,就按转这个 二.准备两个js 三.需要在页面最上面加入 <htm ...

  7. 类函数：string、math

    类:系统内置的处理字符串类型的函数方法类. string是String的快捷方式.所包含的内容都是一样的. Int i=x.length;//获取一个字符串长度 字符串中,索引号从0开始 String ...

  8. 16 继续讲C#中的条件执行。if...else if...else

    if...else...语句可以让我们判断两种情况.当条件为真的时候,执行一部分:当条件为假的时候,执行另一部分.如果我们需要判断3种,4种,5种情况,那我们应该怎么办呢? 在C#中我们可以 使用if ...

  9. [ CCO 2015 ] Artskjid

    \(\\\) \(Description\) \(N\)个点\(M\)条边的有向图,求从\(0\)号节点出发,\(N-1\)号节点结束,且图中每个点至多经过一次的最长路. \(N\in[2,18]\) ...

  10. Android Error:Unable to find method 'com.android.build.gradle.api.BaseVariant.getOutputs()Ljava/util/List;'.

    问题:Error:Unable to find method 'com.android.build.gradle.api.BaseVariant.getOutputs()Ljava/util/List ...