#转载请留言联系

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. 【iOS开发】UIViewController的基本概念与生命周期

    http://www.cnblogs.com/wayne23/p/3868535.html UIViewController是iOS顶层视图的载体及控制器,用户与程序界面的交互都是由UIViewCon ...

  2. Android—实现科大讯飞语音合成

    背景(可以不看) 实验室项目开发的APP需要有语音提示功能,之前的做法是人工录音,剪辑片段,调用Android的多媒体,播放,呵呵呵,,,这是21世纪!这样肯定显得有点low啊,且不说档次,应用场景也 ...

  3. 使用Microsoft EnterpriseLibrary(微软企业库)日志组件把系统日志写入数据库和xml文件

    这里只是说明在项目中如何配置使用微软企业库的日志组件,对数据库方面的配置请参考其他资料. 1.在项目中添加Microsoft.Practices.EnterpriseLibrary.Data.dll. ...

  4. 实现AJAX跨域访问方式一

    1.添加pom依赖 <dependency> <groupId>com.thetransactioncompany</groupId> <artifactId ...

  5. koajs框架学习

    目录: 概述 hello world 中间件 路由中间件koa-router body解析中间件koa-bodyparser 授之以渔 一.概述 koa 是由 Express 原班人马打造的,致力于成 ...

  6. Struts2拦截指定方法的拦截器

    作者:禅楼望月 默认情况下,我们为一个Action配置一个拦截器,该拦截器会拦截该Action中的所有方法,但是有时候我们只想拦截指定的方法.为此,需要使用struts2拦截器的方法过滤特性. 要使用 ...

  7. 二分查找 Binaryserach

    二分查找: 二分查找又称折半查找,优点是比较次数少,查找速度快,平均性能好:其缺点是要求待查表为有序表,且插入删除困难.因此,折半查找方法适用于不经常变动而查找频繁的有序列表.首先,假设表中元素是按升 ...

  8. hdu 3357 Stock Chase (图论froyd变形)

    Stock Chase Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  9. CF985F Isomorphic Strings

    题目描述 You are given a string s s s of length n n n consisting of lowercase English letters. For two g ...

  10. mii-tool与ethtool的用法详解

    mii-tool与ethtool的用法详解 1.mii-tool 配置网络设备协商方式的工具: 感谢原文作者!原文地址:http://blog.chinaunix.net/uid-20639775-i ...