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 相关文章推荐
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
JQuery 写的个性导航菜单
Dec 24 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 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转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
Javascript alert消息换行的方法
2013/08/07 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
Python中base64与xml取值结合问题
2019/12/22 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
献爱心倡议书
2014/04/14 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android