#转载请留言联系

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. python json模块 超级详解

    JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.JSON的数据格式其实就是python里面的字典格式,里面可以包含方括号括起来的数组,也 ...

  2. Spark实战练习02--处理分隔符

    一.场景 devicestatus.txt 文件包含了来自于不同运营商的移动设备的数据,不同的数据格式,包括设备ID.当前状态.位置等等.注意,该文件中的记录具有不同的字段分隔符:一些使用逗号,一些使 ...

  3. JAVA-I/O流任务

    作业地址 5. Scanner基本概念组装对象 编写public static List readStudents(String fileName)从fileName指定的文本文件中读取所有学生,并将 ...

  4. Java作业09-异常

    6. 为如下代码加上异常处理 byte[] content = null; FileInputStream fis = new FileInputStream("testfis.txt&qu ...

  5. new String(str.getBytes(“gbk”),“gbk”)的用法详解

    new String(str.getBytes(“gbk”),“gbk”)的用法详解 前提是str存放的是汉字 一.如果是new String(str.getBytes(“gbk”),“gbk”)时, ...

  6. 【Linux】- ls命令详解

    1 命令功能: 列出当前目录下或者指定目录下的所有文件和目录,ls是list的缩写. 2 命令语法: ls [选项] [目录名]     #注:[]中的内容为非必选项 3 命令选项: -a 列出目录下 ...

  7. SQL Server 部署CLR程序集错误`6218`

    Visual Studio 2015中开发的SQL Server项目,添加了用户自定义函数,需要部署到SQL Server 2005上, 在部署时报错: (70,1): SQL72014: .Net ...

  8. WebSocket简单介绍(WebSocket 实战)(3)

    这一节里我们用一个案例来演示怎么使用 WebSocket 构建一个实时的 Web 应用.这是一个简单的实时多人聊天系统,包括客户端和服务端的实现.客户端通过浏览器向聊天服务器发起请求,服务器端解析客户 ...

  9. [Leetcode] String to integer atoi 字符串转换成整数

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  10. Java之戳中痛点 - （1）易变业务使用脚本语言编写

    脚本语言的3大特征: 1.灵活:脚本语言一般是动态类型,可以不声明变量类型直接使用,也可以在运行期改变类型:2.便捷:脚本语言是解释性语言,在运行期变更非常方便,而不用重启服务3.简单:脚本语言语法比 ...