#转载请留言联系

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. 使用github同步网站

    今天刚刚完成了自己的一个小项目,想把他上传到服务器上,想到到我使用的Visual Stdio Code具有git功能,于是想到使用github作为代码仓库来同步代码. 大体步骤分为这几步:创建远程代码 ...

  2. java script 学习

    用JavaScript输出文本 <p>我的第一个段落.</p> <script> document.write(Date()); </script> & ...

  3. vue2.0 vue-cli项目中路由之间的参数传递

    1.首先配置路由, import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new R ...

  4. 【bzoj5070】危险的迷宫 费用流

    题目描述 JudgeOnline/upload/201710/55.doc 输入 第一行是两个整数A与B(1≤A,B≤10),中间用空格分隔,表示该迷宫是A行B列的. 第2行至第A+1行,每行有B个1 ...

  5. Luogu3731 HAOI2017新型城市化（二分图匹配+强连通分量）

    将未建立贸易关系看成连一条边,那么这显然是个二分图.最大城市群即最大独立集,也即n-最大匹配.现在要求的就是删哪些边会使最大匹配减少,也即求哪些边一定在最大匹配中. 首先范围有点大,当然是跑个dini ...

  6. mobx基本概念

    mobx是一个简单可扩展的状态管理库,主要用来管理状态之间的依赖关系,可以使用在任何状态管理的场景,并不仅限于react. 结合mobx-react可以用在react中,结合mobx-vue可以用在v ...

  7. JAVA List 一边遍历一边删除元素

    JAVA List 一边遍历一边删除元素,报java.util.ConcurrentModificationException异常 2015年02月10日 14:42:49 zhanzkw 阅读数:3 ...

  8. GROUP_CONCAT(expr)

    This function returns a string result with the concatenated non-NULL values from a group. It returns ...

  9. [poj 3436]最大流+输出结果每条边流量

    题目链接:http://poj.org/problem?id=3436 大力套kuangbin板过了orz #include<cstdio> #include<cstring> ...

  10. eclipse安装反编译插件jadclipse

    下载jadClipse地址: 目的:将一些封装的jar或者sdk可以查看源代码 链接: http://pan.baidu.com/s/1kTN4TPd  提取码: 3fvd 将net.sf.jadcl ...