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 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
json对象转字符串如何实现
Dec 02 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 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
Views rows style模板重写代码
2011/05/16 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
python中引用与复制用法实例分析
2015/06/04 Python
python实战教程之自动扫雷
2018/07/13 Python
Django 开发环境配置过程详解
2019/07/18 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
python 用struct模块解决黏包问题
2020/11/07 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
浅析python实现动态规划背包问题
2020/12/31 Python
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
中科前程Java笔试题
2016/11/20 面试题
小学生安全保证书
2014/02/01 职场文书
卫生系统先进事迹
2014/05/13 职场文书
女生节标语
2014/06/26 职场文书
男方婚前保证书
2015/02/28 职场文书
电力安全学习心得体会
2016/01/18 职场文书
餐厅开业活动方案
2019/07/08 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python