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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
javascript常用的方法分享
Jul 01 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
移动端js图片查看器
2016/11/17 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
Python切片用法实例教程
2014/09/08 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python爬虫基本知识
2018/03/05 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
django celery redis使用具体实践
2019/04/08 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python绘制热力图示例
2019/09/27 Python
django下创建多个app并设置urls方法
2020/08/02 Python
JDO的含义
2012/11/17 面试题
交通安全教育制度
2014/02/02 职场文书
文明工地标语
2014/06/16 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
国家助学金感谢信
2015/01/21 职场文书
社区端午节活动总结
2015/02/11 职场文书
应届毕业生自荐信
2015/03/04 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
2015年司法局工作总结
2015/05/22 职场文书