JavaScript驾驭网页-获取网页元素
推荐阅读: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动态修改网页元素内容的方法
本文实例讲述了JavaScript动态修改网页元素内容的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码当用户点击提交按钮后,通过元素的textContent或者innerHTML动态指定元素的内容 <script type="text/javascript"> function showCard() { var message = document.getElementById("CCN").value; var element = docu
-
JavaScript实现自动生成网页元素功能(按钮、文本等)
创建元素的方法: 1.利用createTextNode()创建一个文本对象 2.利用createElement()创建一个标签对象 3.直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的"html代码",不是我们认为的对象树的操作 详解代码: <body> <input type="button" value="创建并添加节点1" onclick="addNode1()"/>
-
原生JS操作网页给p元素添加onclick事件及表格隔行变色
1. 给网页中的所有p元素添加onclick事件: 复制代码 代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.
-
JavaScript控制网页平滑滚动到指定元素位置的方法
本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法.分享给大家供大家参考.具体如下: function elementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft; curtop = obj.offsetTop; while (obj = obj.offsetParent) { curleft += obj.offsetLeft; cu
-
javascript实现拖拽并替换网页块元素
找了一些现成的插件,发现都不太符合我的需求,于是参考网上的例子自己实现了一个,还没有优化. 还是贴代码吧: dragtoreplace DragToReplaceDeom #displayRoom{background:#eee;position:relative;float:left;clear:both;padding:30px 0px 0px 20px;margin-left:20px;margin-top:10px;} .row{display:inline-block;float:l
-
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
如下所示: 复制代码 代码如下: //返回数组类型 function findPosition(oElement) {//oElement 当前元素 if (typeof (oElement.offsetParent) != 'undefined') { for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
-
JavaScript实现拖拽网页内元素的方法
本文实例讲述了JavaScript实现拖拽网页内元素的方法.分享给大家供大家参考.具体如下: 这段代码详细讲述了JS拖拽的原理和方法,值得学习和借鉴. /** * 跨平台的事件监听函数 * @param {Node} node 需要监听事件的DOM节点 * @param {String} eventType 需要监听的事件类型 * @param {Function} callback 事件监听回调函数 * @type Function 返回值为函数类型 * @return 返回监听回调函数的引用
-
JavaScript中计算网页中某个元素的位置
由于项目的需要,测试中需要对网页元素进行截图,以确保它看上去没有问题.之前我写过一篇文章介绍过一种方法,先使用 WebDriver 进行全屏截图,然后根据目标元素(DOM Element)所在的位置,再对截下来的图片进行剪裁,保留我们需要的位置即可. 那段代码一直都工作得很好,直到我知道了一个东西:iframe.iframe(普通的 frame 也是一样的,不过 frame 现在不太常见,这里只用 iframe 举例)中的内容被视为一个独立的网页,连 Window 对象也是和它的父级网页分开的.
-
用JS实现网页元素阴影效果的研究总结
前两天由于一个小项目想为一元素添加一个阴影效果,但是记得看过某高人写的"用Div/CSS模拟阴影效果"文章,现在还有一点印象,其思路很简单,主要是利用几个层的定位偏移来实现的阴影特效,于是偶就想能不能封装成一个js函数,方便在每个html对象上调用. 开始偶以为很简单,但实现过程中确遇到了很多问题,其中最严重的就是浏览器的兼容问题,整整耗了偶整个晚上加半个通宵的时间才搞定,汗呢!不过从这个小东西让我对js及一些浏览器之间的差异及解决办法有了更多更深刻的认识. 总结于此,以备以后查看方便
-
javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页
document.documentElement.getBoundingClientRect下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect()Return Value Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate
-
JavaScript驾驭网页-获取网页元素
推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪.只是不用收拾列羹剩肴,但也没有办法享受美味的成果. 不过,你将能完整网页内容的HTML构成要素:更重要的是,你将拥有替换网页成分的能力. JavaScript让你可以随心所欲地操控网页的HTML代码,从而打开各种有趣的机会之门,一切都是因为标准对象:DOM的存在 getElementById HTML标签都有一个"id"
-
JavaScript驾驭网页-DOM
一.DOM全称 文档对象模型(Document Object Model) 二.DOM是什么 DOM就是一个编程接口,就是一套API. DOM是针对HTML文档.XML等文档的一套API.就类似于JDBC是针对数据库的一套API一样. 三.DOM的用途 DOM 是用来访问或操作HTML文档.XHTML文档.XML文档中的节点元素. 现在基本上所有的浏览器都都执行了W3C发布的DOM规范,所以在浏览器上就可以用DOM的这些API. DOM提供对脚本友善的网页结构与内容的视图 DOM把网页视为节点构
-
JavaScript驾驭网页-CSS与DOM
推荐阅读:JavaScript驾驭网页-DOM DOM是种符合万维网标准的HTML操纵方式,它能比innerHTML特性达成更多操控功能 这里有HTML代码与CSS代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> span.class
-
javascript获取网页各种高宽及位置的方法总结
screen对象 获取屏幕的高宽(分辨率) screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值 screen.availHeight //屏幕可用高度 屏幕的像素宽度减去系统部件宽度之后的值 window对象 获得窗口位置及大小 window.screenTop //窗口顶部距屏幕顶部的距离 window.screenLeft //窗口左侧距屏幕左侧的距离 window.i
-
JavaScript获取网页中第一个图片id的方法
本文实例讲述了JavaScript获取网页中第一个图片id的方法.分享给大家供大家参考.具体如下: 下面的代码通过document.images获取网页中的所有图片,然后获取第一个图片的id属性 <!DOCTYPE html> <html> <body> <img id="klematis lilac" border="0" src="klematis.jpg" width="148"
-
JavaScript获取网页支持表单字符集的方法
本文实例讲述了JavaScript获取网页支持表单字符集的方法.分享给大家供大家参考.具体如下: JavaScript获取网页支持表单的字符集可通过表单的acceptCharset方法获得 <!DOCTYPE html> <html> <body> <form id="frm1" accept-charset="ISO-8859-1"> First name: <input type="text&quo
-
javascript 获取网页标题代码实例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
随机推荐
- CodeFirst从零开始搭建Asp.Net Core2.0网站
- js trim函数 去空格函数与正则集锦
- jQuery fadeOut 异步实例代码详解
- AngularJS创建自定义指令的方法详解
- java反射_改变private中的变量及方法的简单实例
- iOS实现只有底部边框线的输入框示例代码
- mysql、mssql及oracle分页查询方法详解
- asp.net+Ligerui实现grid导出Excel和Word的方法
- Python基于identicon库创建类似Github上用的头像功能
- ThinkPHP调试模式与日志记录概述
- jQuery中ajax的4种常用请求方式介绍
- 一个删选数据的例子,使用GROUP、DISTINCT实例解析
- jquery 点击元素后,滚动条滚动至该元素位置的方法
- jQuery实现下拉菜单的实例代码
- Javascript实现返回上一页面并刷新的小例子
- Linux上下行网速测试工具_speedtest-cli安装使用方法
- Python获取系统默认字符编码的方法
- 原生JS实现的双色球功能示例
- vue-router的HTML5 History 模式设置
- java private关键字用法实例