<!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. Code First：Data Anotation (2)

    示例一 本例演示与索引有关的内容,模型: using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAn ...

  2. 解决juqery easyui combobox只能选择问题

    1.首先设定框为 combobox样式,该字段值为了进行值的显示 <tr class="odd_row"> <td class="TableLabel_ ...

  3. Spark SVM分类器

    package Spark_MLlib import java.util.Properties import org.apache.spark.mllib.regression.LabeledPoin ...

  4. 14_activity四种状态说明

    之前讲过Servlet的生命周期.Servlet的生命周期相对来讲比较少,一共就那么几个方法.Activity的生命周期相对来讲还是比较多的. An activity is a single, foc ...

  5. bzoj题目大体分类

    http://m.blog.csdn.net/article/details?id=51387623

  6. Sql 主键设置

    1.开发数据库时常用命名规范 1>.使用不包含数字的单数表名,如果必要的话可以增加模块名前缀. 2>.对于主键的命名,使用表名+ID的形式. 3>.作为外键的列的名字应该与它们所对应 ...

  7. 对象的属性类型 和 VUE的数据双向绑定原理

    如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty()  //IE9+  和标准浏览器  支持 查看属性的 ...

  8. Kafka详解与总结(六)

    索引 稀疏存储,每隔一定字节的数据建立一条索引(这样的目的是为了减少索引文件的大小). 下图为一个partition的索引示意图: 注: 现在对6.和8建立了索引,如果要查找7,则会先查找到8然后,再 ...

  9. RHEL5.6更新yum源

    RHEL5.6更新yum源记录,2017年2月20日 root用户切换目录至:/etc/yum.repos.d/ [root@localhost yum.repos.d]# pwd /etc/yum. ...

  10. java用匿名内部类实现多线程堆内存变量共享

    匿名内部类介绍:http://www.cnblogs.com/nerxious/archive/2013/01/25/2876489.html 用Runnable模拟实现共享堆内存变量 import ...