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制作的产品广告效果
Dec 08 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
解决vue移动端适配问题
Dec 12 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
set_include_path在win和linux下的区别
2008/01/10 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
使用Python写CUDA程序的方法
2017/03/27 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
pytorch实现线性拟合方式
2020/01/15 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
询价采购方案
2014/06/09 职场文书
财务会计专业自荐书
2014/06/30 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
检讨书大全
2015/01/27 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
医生个人年终总结
2015/02/28 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
考勤制度通知
2015/04/25 职场文书
2019各种承诺书范文
2019/06/24 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
Flink 侧流输出源码示例解析
2022/09/23 Servers