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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 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
什么是短波收听SWL
2021/03/01 无线电
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现倒计时的示例
2014/02/14 Python
Django实现图片文字同时提交的方法
2015/05/26 Python
详解python数据结构和算法
2019/04/18 Python
python实现名片管理器的示例代码
2019/12/17 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
一名女生的自荐信
2013/12/08 职场文书
校企合作协议书
2014/04/16 职场文书
党员承诺书怎么写
2014/05/20 职场文书
推广普通话标语
2014/06/27 职场文书
商场周年庆活动方案
2014/08/19 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
商务考察邀请函模板
2015/02/02 职场文书
企业战略合作意向书
2015/05/08 职场文书