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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
文本链接逐个出现的js脚本
Dec 12 Javascript
兼容ie和firefox js关闭代码
Dec 11 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 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
javascript some()函数用法详解
2014/11/13 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
TypeScript入门-接口
2017/03/30 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python实现简单成绩录入系统
2019/09/19 Python
python实现从wind导入数据
2019/12/03 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
母亲节感言
2015/08/03 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis