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
document.all与WEB标准
May 13 Javascript
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
js创建对象的方法汇总
Jan 07 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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实例
2013/12/24 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
phplot生成图片类用法详解
2015/01/06 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python列表计数及插入实例
2014/12/17 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Python  Django 母版和继承解析
2019/08/09 Python
python随机数分布random均匀分布实例
2019/11/27 Python
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书