在react中，怎样获取dom元素

在react中，我们已经知道，组件并不是真实的DOM节点，而是通过虚拟DOM渲染出来的节点，只有当它被插入到文档后，才成为了真实的DOM。

要从组件中获取真实的DOM节点，则可在jsx标签中加入ref属性

<script type="text/babel">

var Hello=ReactcreateClass({

showThis:function(){

//通过thisrefsusername拿取到了ref为username的元素节点

consolelog(thisrefsusernamevalue)

},

render:function(){

return (

<div>

<input type="text" ref="username" onChange={thisshowThis}/>

</div>

)

}

});

ReactDOMrender(

<Hello />,

documentgetElementById("box")

)

</script>

jQuery手册中这样写道：

$(expression, [context])

expression String 用来查找的字符串

context (可选) Element, jQuery 作为待查找的 DOM 元素集、文档或 jQuery 对象。

那么，你可以这样获取：

$('img:first-child', this)attr('src');

--------------------------------------

或者用原生js：

var a = documentgetElementById('my')getElementsByTagName('a');

var src = [];

for(var i=0;i<slength;i++){

srcpush(a[i]getElementsByTagName('img')[0]src);

}

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++){

A、prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

提示：如需检索 HTML 属性，请使用 attr() 方法代替。

提示：如需移除属性，请使用 removeProp() 方法。

B、val() 方法返回或设置被选元素的值。

元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

如果该方法未设置参数，则返回被选元素的当前值。

C、removeAttr() 方法从被选元素中移除属性。

D、设置或返回匹配元素的样式属性

故，此题选择A

先给你看下面两段代码：

<div id="div1">test!</div>

<script>

   consolelog(documentgetElementById("div1"));  //这个能够获得值

</script><script>

   consolelog(documentgetElementById("div1"));  //这个不能获得值！

</script>

<div id="div1">test!</div>

看出原因没有？当js代码是先于html运行时，是获取不到DOM元素的！因为这时候该DOM元素尚未加载到内存，相当于不存在！

要想实现js代码放到任何位置都能获得DOM元素，就要保证代码在页面完全加载完毕后才开始运行，比如：

<script>

   windowonload=function(){  //网页完全加载完毕才会触发这个事件

      consolelog(documentgetElementById("div1")); //这时候就能获得了

   }

</script>

<div id="div1">test!</div>

改成w=woffsetWidth;

js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1stylewidth拿不到宽度，而通过#div1offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。

小结，因为idoffsetWidth和idoffsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过idstyleatrr来获取。

现在的前端制作很少直接把样式写style里了，都是写在样式表里。如果你要获取的样式没有相对应的（就像#div1stylewidth对 应#div1offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。

一,获取html元素

1getElementByID(id)

通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法

example:

<div id="divid">测试</div>

<script language="javascript">

var div=documentgetElementByID("divid");

alert (divnodeName); //显示元素名

</script>

如果id在元素中不是唯一的,那么获得的将是第一个ID

2getElementsByName(name)

仅用于input radio checkbox等元素,返回名字为name的元素数组

example:

<div name="george"></div>

<input name="george"></div>

<script language=javascript>

var ge=documentgetElementsByName("george");

alert (georgeslength); //获取georges个数,对div唔效果

</script>

3getElementsByTagName(tagname)

返回具有tagname的元素列表数组处理大的DOM结构会用到它

二,DOM Element常用方法

1appendChild(node) //增加内容

向当前对象追加节点,example:

<div id="test">123</div>

<script type="text/javascript">

var newdiv=documentcreateElement("div");

var newtext=documentcreateTextNode("A new div");

newdivappendChild(newtext) ;

documentgetElementById("test")appendChild(newdiv) ;

</script>

当然,上面的功能用documentgetElementById("test")innerHTML="测试一下"就可实现,遗憾的是,innerHTML不属于DOM

2,removeChild(childreference)

移除当前节点的子节点,并返回节点

<div id="father"><div id="child">A child</div></div>

<script type="text/javascript">

var childnode=documentgetElementById("child");

var removednode=documentgetElementById("father")removeChild(childnode)

</script>

3cloneNode(deepBoolean)

复制并返回当前的复制节点,由于复制了原节点的id属性,所以在document树中要改ID属性,以确保ID唯一性

4,insertBefore(newElment,targetElement) 插入新的节点

在当前节点插入一个新节点,如果targetElement为null,那新节点为最后节点

example:

<body>

<span id="lovespan">熊掌我所欲也!</span>

</body>

<script type="text/javascript">

var lovespan=documentgetElementById("lovespan"); //获取id

var newspan=documentcreateElement("span");

var newspanref=documentbodyinsertBefore(newspan, lovespan);

newspanrefinnerHTML="鱼与";

</script>

三,DOM Element常用属性

1、childeNodes 返回所有子节点对象,

例如

<ul id="mylist">

<li>美国</li>

<li>意大利</li>

<li>加拿大</li>

</ul>

<script>

var msg="" ;

var mylist=documentgetElementById("mylist")

for (i=0; i<mylistchildNodeslength; i++){

var li=mylistchildNodes[i];

msg+=liinnerText;

}

alert (msg);

</script>

2,innerHTML

这是一个标准,但它并不书DOM

例如:

<div id="bbb"><span id="aaa">我拉</span></div>

<input type=button value="点击看看">

<script language="javascript">

function change()

{

documentgetElementById("aaa")innerHTML= "修改修改";

}

</script>

3,style

这是一个极其重要的属性,可以获取并修改每个单独的样式

例如:documentgetElementByTagName("body")[0]stylebackgroundColor="#cccccc"

4、firstChild 返回第一个子节点

lastChild 返回最后一个子节点

parentNode 返回父节点的对象。

nextSibling 返回下一个兄弟节点的对象

previousSibling 返回前一个兄弟节点的对象

nodeName 返回节点的HTML标记名称，使用英文的大写字母，如P, FONT

5,click()

执行元素的一次点击，可以用于通过脚本来触发onClick函数

以上就是关于在react中，怎样获取dom元素全部的内容，包括:在react中，怎样获取dom元素、Jquery先获取自身内部的元素属性值，该如何获取、如何获取元素的内容等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！