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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
vue配置多代理服务接口地址操作
Sep 08 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日历制作代码分享
2014/01/20 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
python动态监控日志内容的示例
2014/02/16 Python
学习python类方法与对象方法
2016/03/15 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
市场营销专业个人自荐信格式
2013/09/21 职场文书
高中生的自我评价
2014/03/04 职场文书
关于教师节的广播稿
2014/09/10 职场文书
班主任2015新年寄语
2014/12/08 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
深入理解go slice结构
2021/09/15 Golang
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android