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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
JavaScript实现联动菜单特效
Jan 07 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
德生PL550的电路分析
2021/03/02 无线电
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
jquery插件懒加载的示例
2020/10/24 jQuery
python选择排序算法实例总结
2015/07/01 Python
Python模拟三级菜单效果
2017/09/11 Python
分享6个隐藏的python功能
2017/12/07 Python
Python切片操作实例分析
2018/03/16 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
总会计师岗位职责
2014/02/19 职场文书
专科生就业求职信
2014/06/22 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫