js获取html元素的方式

html-css020

js获取html元素的方式,第1张

js获取html元素的方式

+通过ID获取:getElementById('id属性值')

+通过标签名:getElementsByTagName('标签名')

+通过类名:getElementsByClassName('类名')

+通过name属性:getElementsByName('name属性值')

+通过选择器获取一个元素:querySelector

+通过选择器获取一组元素:querySelectorAll

1.获取id值为d1的html元素

将获取到的html元素称为DOM节点对象,必须传参数,参数是string类型,是获取元素的id。返回值只获取到一个元素,没有找到返回null。

2.通过标签名:getElementsByTagName('标签名')

参数是是获取元素的标签名属性,不区分大小写,根据标签名获取html元素, 返回的是一个数组(伪数组) 

通过类名:getElementsByClassName('类名')

参数是元素的类名,返回值是一个类数组,没有找到返回空数组。

通过类名:getElementsByClassName('类名')

必须传参数,参数是是获取元素的name属性,返回值是一个类数组,没有找到返回空数组。

通过选择器获取一个元素:querySelector

参数是选择器,返回值只获取到第一个元素。

通过选择器获取一组元素:querySelectorAll

参数是选择器,返回值是一个数组。

var

box=document.getElementById('box')

//

获取元素

alert(box.getBoundingClientRect().top)

//

元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right)

//

元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom)

//

元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left)

//

元素左边距离页面左边的距离

getBoundingClientRect()

---元素距离页面的距离

canvas--详情参考css3(画图用的)

clientX--鼠标位置的x轴坐标

var

xe应该就是一个变量

3.获取在canvas里的点坐标

getBoundingClientRect()//用于获取某个元素相对于视窗的位置集合。集合中有top,

right,

bottom,

left等属性。

function

detect(event){

var

x=event.clientX-canvas.getBoundingClientRect().left

var

y=event.clientY-canvas.getBoundingClientRect().top

}

综合上述应该是获取在canvas里的点坐标吧!

http://blog.csdn.net/gao_xu_520/article/details/59484428

只能通过JavaScript来获取, 然后通过JS获取, 然后通过JavaScriptInterface来传递给Java层。\x0d\x0a\x0d\x0a做webview,遇到2种需求,一种是在自己服务器上的HTML中获取数据,另一种是通过自己服务器上的HTML中的超链接跳到另一个站点的HTML中,并获取数据。\x0d\x0a于是,总结了2种通过webview获取网页上的数据的方式:\x0d\x0a第一种:简单点的,直接通过js调java,在调用方法的过程中将数据通过方法的参数传递给Android端,(前提:服务端有对应的faxun对象,而且调用的方法是showImages(String[] imgUrls))。\x0d\x0a\x0d\x0aclass MyJavaScriptInterface {\x0d\x0a\x0d\x0aMyJavaScriptInterface() {\x0d\x0a}\x0d\x0a\x0d\x0a/**\x0d\x0a * js调java,显示图片\x0d\x0a *\x0d\x0a * @param imgUrls\x0d\x0a */\x0d\x0a@JavascriptInterface\x0d\x0apublic void showImages(String[] imgUrls) {\x0d\x0aLogUtils.i(TAG, "imgUrls = " + imgUrls[0])\x0d\x0aNewsDetailWebviewActivity.this.imgUrls = imgUrls\x0d\x0a}\x0d\x0a}\x0d\x0a\x0d\x0a...\x0d\x0awebView.addJavascriptInterface(new MyJavaScriptInterface(), "faxun")\x0d\x0a\x0d\x0a第二种:有点复杂,通过webview注册一个本地接口后,然后通过java调js,拿到document对象后,解析HTML标签,然后数据会通过本地接口中的回调方法传递给Android端,(前提:HTML页面中的meta标签中有对应的reply_info名称和content属性,数据是封装在content里面的json格式的字符串)。\x0d\x0a\x0d\x0aclass MyWebClient extends WebViewClient {\x0d\x0a@Override\x0d\x0apublic void onPageFinished(WebView view, String url) {\x0d\x0aview.loadUrl("javascript:window.getShareData.OnGetShareData("\x0d\x0a+ "document.querySelector('meta[name=\"reply_info\"]').getAttribute('content')" + ")")\x0d\x0asuper.onPageFinished(view, url)\x0d\x0a}\x0d\x0a}\x0d\x0a\x0d\x0aprivate class GetShareDataInterface {\x0d\x0a@JavascriptInterface\x0d\x0apublic void OnGetShareData(String shareData) {\x0d\x0aif (null != shareData) {\x0d\x0atry {\x0d\x0aJSONObject shareJson = new JSONObject(shareData)\x0d\x0atitle = shareJson.optString("title")\x0d\x0adescription = shareJson.optString("description")\x0d\x0aimageUrl = shareJson.optString("imageUrl")\x0d\x0a} catch (JSONException e) {\x0d\x0ae.printStackTrace()\x0d\x0a}\x0d\x0a\x0d\x0a}\x0d\x0a}\x0d\x0a}\x0d\x0a\x0d\x0a.....\x0d\x0awebView.setWebViewClient(new MyWebClient())\x0d\x0a\x0d\x0a其实,如果是普通的需求,两种方式都可以解决问题,但是如果是有些HTML没有做js调java,只是个普通的HTML,并且需要获取页面上的数据时,只能通过第二种方式来获取HTML上的数据了,比如获取HTML上的title等等。