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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 Javascript
基于angular实现树形二级表格
Oct 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
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
pyhton列表转换为数组的实例
2018/04/04 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Django更新models数据库结构步骤
2020/04/01 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
法律六进活动方案
2014/03/13 职场文书
留学经费担保书
2014/05/12 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
2015年见习期工作总结
2014/12/12 职场文书
普宁寺导游词
2015/02/04 职场文书
污水处理保证书
2015/05/09 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server