#转载请留言联系

1.获取元素

JavaScript的用途就是为了实现用户交互和网页的大部分动画。所以JavaScript常常需要操作html中的元素。要先操作就要先获取过来。JS有几种途径获取元素，但是用的最多的还是通过元素的id来获取。

获取元素的方式：

div1=document.getElementById('ID名')
// getElementById  寻找某个id为**的标签，用的最多

div2=document.getElementsByTagName('标签名')[0]
// getElementsByTagName 根据标签寻找对应元素  返回都是数组

div3=document.getElementsByClassName("组名")
// getElementsByClassName 根据类名寻找对应元素   返回都是数组

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1 id="title">我是大标题</h1>

    <script>

        var h1=document.getElementById('title');

        console.log(h1)

    </script>

</body>

</html>

需要注意的是，本例中，<script></script>要放在<h1></h1>后面！如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载。

解决办法有以下两种：

  • JavaScript的代码要放在元素的后面。
  • 将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。例如：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <script>

        window.onload=function(){

        var h1=document.getElementById('title');

        console.log(h1)

    }

    </script>

</body>

    <h1 id="title">我是大标题</h1>

</html>

不过此方法比较麻烦，所以一般不使用。

2.操作元素

  • 修改html页面元素的样式。示例：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #one{

            width: 100px;

            height: 100px;

            background: blue;

        }

    </style>

</head>

<body>

    <div id="one"></div>

    <script>

        var div1=document.getElementById("one");

        div1.style.width='200px';

        div1.style.height="200px";

        div1.style.background='red';

    </script>

</body>

</html>

注意：修改样式的时候“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”！

  • 修改html页面元素的内容。示例：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1 id="title">原标题</h1>

    <script>

        var oH1=document.getElementById('title');

        oH1.innerHTML='新标题';

    </script>

</body>

</html>
 

JavaScript获取和操作html的元素的更多相关文章

  1. javaScript获取文档中所有元素节点的个数

    HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen

    javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...

  3. javaScript几个操作数组增减元素的函数

    1. shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined 2. unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5]; ...

  4. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  5. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

  6. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  7. 从零开始学 Web 之 jQuery（二）获取和操作元素的属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. Robotium源码解读-native控件/webview元素的获取和操作

    目前比较有名的Uitest框架有Uiautomator/Robotium/Appium,由于一直对webview元素的获取和操作比较好奇,另外Robotium代码量也不是很大,因此打算学习一下. 一. ...

  9. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

随机推荐

  1. 数据结构7——DP优化

    斜率优化/单调队列优化/四边形优化

  2. Caused by: redis.clients.jedis.exceptions.JedisDataException: WRONGTYPE Operation against a key holding the wrong kind of value

    对错误类型key的操作,也就是说redis中没有你当前操作的这个key,而你用这个key去执行某些操作!检查key是否正确

  3. 最短路径——Floyd算法（含证明）

    通过dij,ford,spfa等算法可以快速的得到单源点的最短路径,如果想要得到图中任意两点之间的最短路径,当然可以选择做n遍的dij或是ford,但还有一个思维量较小的选择,就是floyd算法. 多 ...

  4. penLDAP学习笔记

    LDAP协议 目录是一组具有类似属性.以一定逻辑和层次组合的信息.常见的例子是通讯簿,由以字母顺序排列的名字.地址和电话号码组成.目录服务是一种在分布式环境中发现目标的方法.目录具有两个主要组成部分: ...

  5. eclipse安装问题

    eclipse安装之前需要安装JDK. 注意:eclipse和JDK需要一致,如都是64位或者都是32位. 不然会报错.

  6. 7forJava

    interface Pet{ public String getName(); public String getColor(); public int getAge(); } class Cat i ...

  7. javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    主要介绍了javascript获取和判断浏览器窗口.屏幕.网页的高度.宽度等 scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端 ...

  8. Visual Studio 2012,创建工程Build Driver，基于纯Source Code.

    拿到一堆纯代码,怎么去Create Project,设置Include路径,lib路径,要不要Pre-compile技术,配置Project之间的依赖关系. SourcesConverter  Bas ...

  9. [剑指Offer] 6.旋转数组的最小数字（二分法）

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转 ...

  10. [bzoj2621] [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper

    题目链接 状压\(dp\) 根据套路,先设\(f[sta]\)为状态为\(sta\)时所用的最小分组数. 可以发现,这个状态不好转移,无法判断是否可以装下新的一个物品.于是再设一个状态\(g[sta] ...