JavaScript驾驭网页-获取网页元素


Posted in Javascript onMarch 24, 2016

推荐阅读:JavaScript驾驭网页-DOM

JavaScript驾驭网页-CSS与DOM

利用DOM分割HTML

利用JavaScript控制网页内容其实很像烹饪。只是不用收拾列羹剩肴,但也没有办法享受美味的成果。

不过,你将能完整网页内容的HTML构成要素:更重要的是,你将拥有替换网页成分的能力。

JavaScript让你可以随心所欲地操控网页的HTML代码,从而打开各种有趣的机会之门,一切都是因为标准对象:DOM的存在

getElementById

HTML标签都有一个"id"属性,第个标签的该属性都是独一无二的
可以通过id属性来获取元素
<body>
<div id="div1">
<div id="div2">
内容
</div>
</div>
</body>
var sceneDesc=document.getElementById("div2");
getElementById可以通过元素的id属性去访问标签
括号里是id的值

getElementsByTagName

也可以通过标签名来获取元素
<body>
<div id="div1">
<div id="div2">
<div id="div3">
内容
</div>
</div>
</div>
</body>
var divs=document.getElementsByTagName("div");
getElementsByTagName返回所有div标签,结果是一个数组,结果按照标签在HTML中的顺序排列
括号里是标签名
var divs=document.getElementsByTagName("div")[2];
用索引获取第三个div标签

innerHTML

innerHTML特性对所有存储在元素里的内容提供了访问管道
通过innerHTML访问元素内存储的内容:
<div id="div1">
<p id="story"> you are standing</p>
<strong>alone</strong> in the woods.
</div>
</body>
document.getElementById("story").innerHTML;
返回的内容是: you are standing alone in the woods.
innerHTML获取的是指定元素下的所有内容与标签
innerHTML也能用于设置网页内容
document.getElementById("story").innerHTML="You are <strong>not</strong> alone!";
innerHTML只用来设置可以包含文本的标签

有关JavaScript驾驭网页-获取网页元素的知识就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 #Javascript
JavaScript驾驭网页-DOM
Mar 24 #Javascript
常用的JQuery函数及功能小结
Mar 24 #Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 #Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 #Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 #Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 #Javascript
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
PHP 第二节 数据类型之转换
2012/04/28 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
图片之间的切换
2006/06/26 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python多线程下载文件的方法
2015/07/10 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
物理力学求职信
2014/02/18 职场文书
安全技术说明书
2014/05/09 职场文书
积极心理学课程心得体会
2016/01/22 职场文书