如何获取div里的内容

如何获取div里的内容,第1张

<!DOCTYPE html><html><head>

<title></title>

<script type="text/javascript">

function getElements(){

var x=documentgetElementsByName("div"); for(var i=0;i<xlength; i++){

alert(x[i]innerHTML);

}

} </script></head><body>

<div id="1">1231</div>

<div id="2">qweq</div>

<div id="3">qw12</div>

<div id="4">as12</div>

<div id="5">zx12</div></body></html>12345678910111213141516171819202122

输出内容

1231

qweq

qw12

as12

zx12

获取div里元素方法有2种,分别是children()方法和find()方法。

1、children()方法:获取该元素下的直接子集元素

2、find()方法:获取该元素下的所有子集元素

分别以以下HTML代码为例:<ul><li>list1<ul><li>list1-1</li><li>list1-2</li></ul></li><li>list2<ul><li>list2-1</li><li>list2-2</li></ul></li><li>list3<ul><li>list3-1</li><li>list3-2</li></ul></li></ul>

children()方法获取ul下面直接子集元素li:$("ul")children("li")

需要注意的是,如果li元素下还有li元素,children方法将不会被获取。我们可以用length来测试获取的个数“$("ul")children("li")length”,最后输出结果为3

find()方法获取ul下所有元素li:$("ul")find("li")

需要注意的是,find方法会无限循环查找ul标签节点下的li,一直找到没有为止,用length来测试获取个数“$("ul")find("li")length”,最后输出结果为9

children和find的区别:children只会查找直接子集,而find会跨越层级查找,一直找到没有为止。

代码如下:

<div

id="div1"

style="

height:20px;

border:solid

1px

#999"

onClick="check(this)"

contentEditable=true>XXXXXX</div>

innerHTML

获取

XXXXXX

outerHTML

获取

<div

id="div1"

style="

height:20px;

border:solid

1px

#999"

onClick="check(this)"

contentEditable=true>XXXXXX</div>

假如div中包含元素可用childNodes[Index]属性获取。

1 使用form表单提交

使用表单提交是调用了表单的submit方法,其配置项包括url、method等。这种方式能够以JSON的形式提交参数信息。

var myform = Extcreate('ExtformPanel',{undefined

defaultType: 'textfield',

items:[{undefined

fieldLabel : 'Name',

name : 'name'

},{undefined

fieldLabel: 'Gender',

name : 'gender'

},{undefined

fieldLabel : 'Age',

name: 'age'

}],

buttons: [{undefined

text : 'load',

handler : function(){undefined

thisup('form')getForm()submit({undefined

url: '/request/userinfo',

method : 'POST',

success : function(form, action){undefined

consolelog(form);

ExtMsgalert('title', 'load success');

});

}]);

2 使用Ajax异步提交

将上述handler方法中的内容换成一下代码即可。在Ajax的request方法中是一个配置对象,其配置参数包括url,type,params。其中params表示要提交的参数,在此例中是从form表单中通过getValues()方法获得的。该种方式也能将参数一JSON的方式提交到后台,与一个对象匹配。

var values = thisup('form')getForm()getValues();

ExtAjaxrequest({undefined

url:'/request/userinfo',

headers : {undefined'userHeader': 'userMsg'},

type:'POST',

params:values,

success:function(response){undefined

var data = responseresponseText;

consolelog(data);

consolelog("success");

},

});

3 使用ExtdataStore

在项目中经常需要通过提交一些数据来从后台获取相应的信息。例如,在表单中输入某个人的id和name就可以查出它的相关信息并在前台显示。一个关于extjs的例子如下:

//data Model

Extdefine('User',{undefined

extend: 'ExtdataModel',

fields: [{name:'name',type:'string'},

{name:'gender',type:'string'},

{name:'age',type:'string'}

]

});

var userStore = Extcreate('ExtdataStore',{undefined

model: 'User',

pageSize: 20,

// autoLoad : true,

proxy: {undefined

type : 'ajax', //提交数据的方式

url : '/request/userinfo',

reader : { //以json的形式读取将要提交的数据

type : 'json',

root : 'resultList'

},

writer : {undefined

type : 'json'

},

actionMethods : {undefined

create : 'POST'

}

},

});

//grid Panel

Extcreate('ExtgridPanel',{undefined

store: userStore,

columns: [

{header : 'Name', dataIndex : 'name'},

{header : 'Gender', dataIndex : 'gender'},

{header : 'Age', dataIndex : 'age'}

],

height: 200,

width: 400,

renderTo: 'div2'

});

//form Panel

var myform = Extcreate('ExtformPanel',{undefined

defaultType: 'textfield',

items:[{undefined

fieldLabel: 'Name',

name: 'name'

},{undefined

fieldLabel: 'Gender',

name: 'gender'

},{undefined

fieldLabel : 'Age',

name : 'age'

}],

buttons: [{undefined

text: 'load',

handler: function(){undefined

var values = thisup('form')getForm()getValues();

consolelog(values);

userStoreproxyextraParams=values;

userStoreloadPage(1);

}

}

});

在handler方法中获取form表单的参数后,赋值给userStoreproxyextraParams,然后调用userStoreloadPage(1)。调用loadPage()方法时,会委托给proxy对象去后台获取数据。所以对proxy的配置是核心。使用这个方式从后台获取数据时,后台接口返回的对象应该包括一个List字段,list中包含所需要的具体信息。比如

@ReponseBody

public UserInfoResp getUserInfo(User user) {undefined

}

UserInfoResp应该像这样有一个List字段

class UserInfoResp {undefined

List<User> resulltList;

}

假设你的html中有以下的div\x0d\\x0d\\x0d\\x0d\\x0d\如果是要获取id是id1的div的数据,获取div里面的内容有两种方式\x0d\1,纯js获取数据\x0d\var a=documentgetElementById("id1")innerText;\x0d\\x0d\2,jqeury获取数据\x0d\var a=$("#id1")html();回答于 2022-11-16

以上就是关于如何获取div里的内容全部的内容,包括:如何获取div里的内容、如何获取div里面的元素、怎么获取div标签之间的内容等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9703741.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存