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 相关文章推荐
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
openlayers实现图标拖动获取坐标
Sep 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开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php 数组使用详解 推荐
2011/06/02 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
python中的字典详细介绍
2014/09/18 Python
python实现统计代码行数的方法
2015/05/22 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
python定义类的简单用法
2020/07/24 Python
用python批量移动文件
2021/01/14 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
寄语学生的话
2014/04/10 职场文书
爱与责任演讲稿
2014/05/20 职场文书
职工小家建设活动方案
2014/08/25 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
户外拓展训练感想
2015/08/07 职场文书
新年祝酒词大全
2015/08/11 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
React更新渲染原理深入分析
2022/12/24 Javascript