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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
javascript修改图片src的方法
Jan 27 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 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
组合算法的PHP解答方法
2012/02/04 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
JS实现图片翻书效果示例代码
2013/09/09 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
python Tkinter的图片刷新实例
2019/06/14 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Django 请求Request的具体使用方法
2019/11/11 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
Python接口自动化测试的实现
2020/08/28 Python
python 两种方法删除空文件夹
2020/09/29 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
毕业自我评价
2014/02/05 职场文书
买房协议书
2014/04/11 职场文书
三严三实心得体会范文
2014/10/13 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
教师党员承诺书2015
2015/01/21 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang