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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
javascript数组的扩展实现代码集合
Jun 01 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
jquery实现图片预加载
Dec 25 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
详解js中的几种常用设计模式
Jul 16 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
PHP4实际应用经验篇(7)
2006/10/09 PHP
缓存技术详谈―php
2006/12/14 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
家长给小学生的评语
2014/01/30 职场文书
小区消防演习方案
2014/02/21 职场文书
工作证明格式范文
2015/06/15 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python