#转载请留言联系

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. CCS Font 知识整理总结

    总是搞不懂 CCS 中如何正确的使用字体,这下明白了. 1.什么是 font-face font-face 顾名思义,就是文字的脸.字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书. ...

  2. [译]在SQL查询中如何映射(替换)查询的结果？

    问题来源: https://stackoverflow.com/questions/38567366/mapping-values-in-sql-select 有一个表格,就称它Plant,它有三列: ...

  3. 【iOS开发】IOS界面开发使用viewWithTag:(int)findTag方法获取界面元素

    http://blog.csdn.net/lxp1021/article/details/43952551 今天在开发OS界面的时候,遇到通过界面UIview viewWithTag:(int)fin ...

  4. C++-STL：vector用法总结

    目录 简介 用法 1. 头文件 2. vector的声明及初始化 3. vector基本操作 简介 vector,是同一类型的对象的集合,这一集合可看作可变大小的数组,是顺序容器的一种.相比于数组,应 ...

  5. maven仓库地址

    使用Maven进行开发的时候,比较常见的一个问题就是如何寻找我要的依赖,比如说,我想要使用activeMQ,可是我不知道groupId,artifactId,和合适的version.怎么办呢?本文介绍 ...

  6. P1404 平均数

    题目描述 给一个长度为n的数列,我们需要找出该数列的一个子串,使得子串平均数最大化,并且子串长度>=m. 输入输出格式 输入格式: N+1行, 第一行两个整数n和m 接下来n行,每行一个整数a[ ...

  7. [CF475E]Strongly Connected City 2

    题目大意:给一张$n(n\leqslant2000)$个点的无向图,给所有边定向,使定向之后存在最多的有序点对$(a,b)$满足从$a$能到$b$ 题解:先把边双缩点,因为这里面的点一定两两可达. 根 ...

  8. [洛谷P3937]Changing

    题目大意:有 $n$ 盏灯环形排列,顺时针依次标号为 $1\cdots n$.初始时刻为 $0$ ,初始时刻第 $i$ 盏灯的亮灭 $a_i$, $0$ 表示灭, $1$ 表示亮.下一时刻每盏灯的亮灭 ...

  9. Cube 找规律

    这道题我们经过简单的推测便可得知3个之前特判,四个之后就成为了一般状况,就是我们每侧都是走整个整个的|_|之后零的走|||. 考试的时候包括平时做题,许多正确的感性比理性证明要强得多. #includ ...

  10. composer应用

    ubentu安装 进入自己的项目根目录cd/path/to/my/project 下载composer curl -s http://getcomposer.org/installer 把这个文件移到 ...