如何获取元素的内容

1获取元素内的文本例如：有标签<strong,取<strong的文本内容：非mozilla浏览器：strongeleminnertext其它浏览器：strongelemfirstchildnodevalue;还有一个通用的函数：function text(e){var t="";e = echildnodes || e;for(var j=0;j<elength;j++){t += e[j]nodetype != 1 e[j]nodevalue : text(e[j]childnodes);}return t;}2获取元素内的html所有现代浏览器，都实现了html dom 元素的一个额外属性：innerhtml使用这个属性就可以从一个元素中提取所有的html和文本了。如果元素内，只有文本，可以替换上面的方法；如果含有子元素，则提取所有子元素和文本。3 *** 作元素特性获取和设置特性的值，常用的可以使用getattribute和setattributeHTML DOM文档还有作为快速特性获取器（getter）/设置器（setter）的额外属性集合，比如：elementid="main",elementvalue="123",作者有个更通用的方法，来获取和设置，写得很好，可以看看81页。下面是总结的一些在DOM中常用的方法：/根据id获得元素/function id(name){return documentgetElementById(name);}/有elem参数，是查找elem下的节点名；如果没有elem，则查找整个文档/function tag(name,elem){return (elem || document)getElementsByTagName(name);}/找出全部有指定类值的元素/function hasclass(name,type){var r=[];var re=new RegExp("(^|//s)" + name + "(//s|$)");var e = documentgetElementsByTagName(type || "");for(var j=0;j<elength;j++)if(retest(e[j])) rpush(e[j]);return r;}/获取元素文本内容的通用函数/function text(e){var t = "";e= echildNodes || e;for(var j=0;j<elength;j++){

在获取子元素之前js肯定不知道总共有多少个子元素，所以子元素都是以元素集合的形式出现的（即使子元素只有一个甚至没有），然后再从中枚举出每个子元素，比如：

elemchildNodes[0]

//这是第一个子元素

elemchildNodes[1]

//这是第二个子元素，依此类推

此外，还可以使用children，它也是个集合，用法一样：

elemchildren[0]

//这是第一个子元素

elemchildren[1]

//这是第二个子元素，依此类推

childNodes和children的区别在于，前者会把文本元素（含回车、空格等）也作为子元素，后这则只把标签元素作为子元素

此外，如果知道子元素的ID、Name、Class或者标签名，也可以直接获取子元素，比如：

elemgetElementById("abc")

//获取id为abc的子元素（ID具有唯一性，所以它可以直接获取）

elemgetElementsByName("xxx")[0]

//获取name属性为xxx的第一个子元素（name属性允许重名，所以它是个集合）

elemgetElementsByClassName("hehe")[0]

//获取class为hehe的第一个子元素（class属性也是可以重名的）

elemgetElementsByTagName("a")[0]

//获取第一个a标签子元素

其实不必这样写的,你先建立两个css

<style type="text/css">

active{}

normal{display}

</style>

{

if(documentgetElementById("元素ID")className=="active")

{

documentgetElementById("元素ID")className="normal"

}

else

documentgetElementById("元素ID")className=="active"

}

如果一个层需要事先隐藏,就声明它的class为normal,这是滑动菜单或者树型菜单的最常规写法

还有什么需要帮助的可以给我留言

1、JQuery的核心的一些方法

each(callback) '就像循环

$("Element")length; ‘元素的个数，是个属性

$("Element")size(); '也是元素的个数，不过带括号是个方法

$("Element")get(); ‘某个元素在页面中的集合，以数组的形式存储

$("Element")get(index); '功能和上面的相同，index表示第几个元素，数组的下标

$("Element")get()reverse(); ‘把得到的数组方向

$("Element1")index($("Element2")); '元素2在元素1中的索引值是。

2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦，但是他俩是可以转换滴)

$("") ‘表示获取所有对象 但是我至今没这样用过

$("#XXX") '获得 id=XXX 的元素对象（id可以是标签的id或CSS样式id） 常用

$("input[name='username']") 获得input标签中name='userName'的元素对象 常用

$("abc") ' 获得样式class的名字是abc的元素对象 常用

$("div") ' 标签选择器 选择所有的div元素 常用

$("#a,b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素

$("#a b p") 'ID号是a的并且使用了 b样式的 所有的p元素

3、层级元素获取

$("Element1 Element2 Element3 ") '前面父级 后面是子集

$("div > p") '获取div下面的所有的 p元素

$("div + p") 'div元素后面的第一个 p元素

$("div ~ p") 'div后面的所有的 p元素

4、简单对象获取

$("Element:first") 'HTML页面中某类元素的第一个元素

$("Element:last") 'HTML页面中某类元素的最后一个元素

$("Element:not(selector)") '去除所有与给定选择器匹配的元素,如：$("input:not(:checked)") 表示选择所有没有选中的复选框

$("Element:even") '获得偶数行

$("Element:odd“）'获得奇数行

$("Element:eq(index)") '取得一个给定的索引值

$("Element:gt(index)") '取得给定索引值的元素 之后的所有元素

$("Element:lt(index)") '取得给定索引值的元素 之前的所有元素

5、内容对象的获取和对象可见性

$("Element:contains(text)") '元素中是否包含text文本内容

$('Element:empty") '获得元素不包含子元素或文本的

$("Element:partnt") '获得元素包含子元素或文本的

$("Element:has(selector)") ‘是否包含某个元素， 如：$("p:has(span)")表示所有包含span元素的p元素

$("Element:hidden") '选择所有可见元素

$("Element:visible") '选择所有不可见元素

6、其他对象获取方法

$("Element[id]") '所有带有ID属性的元素

$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素

$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素

$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素

$("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素

$("Element[attribute = youlika ]" '获得所有某个属性包含youlika的开头的元素

$("Element[selector1][selector2][]") '符合属性选择器，比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。

7、子元素的获取

$("Element:nth-child(index)") '选择父级下面的第n个元素

$("Element:nth-child(even)") '选择父级下面的偶数

$("Element:nth-child(odd)") '选择父级下面的奇数

$("Element:nth-child(3n+1)") '表达式

$("Element:first-child") '选择父级下面的第一个子元素

$("Element:last-child") '选择父级下面的最后一个子元素

$("Element:only-child") '匹配父级下的唯一的一个子级元素，例如dt在dl列表中唯一，那么将选择dt

8、表单对象获取

$(:input)//查找所有的Input元素，当然也包括下拉列表，文本域，单选框，复选框等。

$(:text)//匹配所有的单行文本框

$(:password)//匹配所有的密码框

$(:radio)//匹配所有的单选按钮

$(:checkbox)//匹配所有的复选框

$(:submit)//匹配所有的提交按钮

$(:image)//匹配所有的图像域，例如

$(:reset)//匹配所有的重置按钮

$(:button)//匹配所有的按钮

$(:file)//匹配所有的文件上传域

$(:hidden)//匹配所有的不可见元素或者type为hidden的元素

$(:enabled)//匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的单选按钮

$(:disabled)//匹配所有的不可用input元素，作用与上相反

$(:checked)//匹配所有选中的复选框元素

$(:selected)//匹配所有的下拉列表

9、元素属性的设置与移除

$("Element")attr(name) '取得第一个匹配的属性值，比如$("img")attr("src")

$("Element"attr(key,value)") '某一个元素设置属性

$("Element"attr({key:value,key1:value,})) ‘为某个元素一次性设置多个属性

$("Element")attr(key,function) '为所有匹配的元素设置一个计算的属性值。

$("Element")removeAttr(name)//移除某一个属性

为被选元素设置或返回一个或多个样式属性。

设置或返回被选元素的属性和值。

val() 方法返回或设置被选元素（ 只有表单元素才有 ）的 value 属性。

1、新建一个html文件，命名为testhtml。

2、在testhtml文件内，使用h1标签创建一个标题，同时设置h1标签的class属性为myh，下面将使用jquery方法判断该class是否存在。

3、在testhtml文件内，使用button标签创建一个按钮，按钮名称为“判断class”。

4、在testhtml文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行getclass（）函数。

5、在js标签中，创建getclass()函数，在函数内，使用标签名称（h1）获得元素对象，通过hasClass()方法来判断myh类名是否存在，并把结果返回res变量中。

6、在getclass()函数内，使用if语句对上一步的res变量进行判断，如果为true，即存在myh类名，则提示“h1标签有类名myh”，否则，提示“h1标签没有myh”。

7、在浏览器打开testhtml文件，点击按钮，查看实现的效果。

1documentgetElementById("id名")

通过id属性的值查找，返回满足条件的第一个元素

2documentgetElementsByTagName("标签名")

通过标签名来获取页面中的元素。返回的是多个标签。

并不是真正的数组，但是我们可以想 *** 作数组一样 *** 作他（类数组）

3documentgetElementsByClassName("class名")

通过类名来获取页面中的元素。返回的也是多个标签

4documentgetElementsByName("表单元素name")

通过表单的name属性的值来获取元素

5documentquerySelector("div p a")

匹配指定 CSS 选择器的 第一个元素 。 如果没有找到，返回 null。

6documentquerySelectorAll("div")

获取所有满足条件的元素

7三个特殊节点

8childNodes 所有节点。包括各种节点

9fristChild 获取一个元素的第一个子节点

10lastChild 获取一个元素的最后一个子节点

11parentNode 获取一个元素的父节点

12previousSibling 获取一个元素的上一个兄弟节点

13nextSibling 获取一个元素的下一个节点

14children 只获取子元素

15firstElementChild 获取第一个元素子节点

16lastElementChild 获取最后一个元素子节点

17nextElementsibling 获取下一个元素兄弟节点

18previousElementsibling 获取上一个元素兄弟节点

19parentElement 获取父元素节点

20childElementCount 获取子元素的个数

1documentcreateElement(元素名) 创建一个元素节点

2documentcreateTextNode("这是新创建的一段文本") 创建一个文本节点

3appendChild() 添加元素到容器中

4insertBefore() 在一个节点前插入新节点

5removeChild() 删除子节点

6replaceChild() 替换子节点

7cloneNode() 克隆节点 传入true则复制所有节点

8setAttribute() 给元素设置属性

参数1：属性的名

参数2：属性的值

如果属性不存在，则添加；存在，则修改

9romveAttribute() 删除属性

参数：要删除的属性名

10getAttribute() 获取属性的值

参数：属性名

11访问 元素 id 名

boxid

12访问 元素 class 名

boxclassName

boxclassList 类数组

13获取标签名

boxtagName

boxnodeName

14innerHTML属性

innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。

值为为文本

15innerText属性

16outerHTML

跟innerHTML相比多包括了一个它自身

1访问行内（内联）样式表

2内部样式表和外部样式表的获取

getComputedStyle()

参数1：表示样式表所属的元素

参数2：如果获取的是伪元素的样式，传入伪元素，正常元素传入null 或不传

兼容性问题

3获取元素实际的宽高

offsetWidth 宽

offsetHeight 高

4获取元素参考父容器的left 和 top

offsetLeft 距离左部

offsetTop 距离上部

offsetParent 查找这个元素的参照父容器

以上就是关于如何获取元素的内容全部的内容，包括:如何获取元素的内容、JS只有childrenNodes吗，没有childrenNOde那想访问子元素怎么写、DHtml:父元素隐藏了(display:none),子元素也跟着隐藏了，但子元素的Display获取不到阿等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！