一,获取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函数
我给你一个例子：
<input type="text" id="txt" />
<a href="gotowhere=" onclick="thishref=thishref + documentgetElementById('txt')value">点我</a>
这个很好理解哦、
---------------------------
谢谢。
获取对象后，调用如下方法：
function allPrpos(obj) {
// 用来保存所有的属性名称和值
var props = "";
// 开始遍历
for(var p in obj){
// 方法
if(typeof(obj[p])=="function"){
// obj[p]();
}else{
// p 为属性名称，obj[p]为对应属性的值
props+= p + "=" + obj[p] + ""t";
}
}
// 最后显示所有的属性
alert(props);
}
elementplus点击表格某一单元格，获取当前dom方法：
1、利用Table组件的cell-click属性，可以获取当前点击的单元格列对应的Dom元素。
2、清空所有的名为current-cell的class属性。
3、为当前获取的单元格Dom动态添加名为current-cell的class属性。
4、控制单元格的input标签的显示隐藏就能实现表格的编辑功能。
在以往的工作当中，通常会遇到需要处理 DOM 的时候， DOM *** 作属于一个常规的范畴，我们可能需要通过它绑定一个事件、调整滚动条的位置、管理焦点、文本选择、媒体播放等等。
基于工程页面、逻辑复杂性、复用性等等因素可以选择合适的方案方便我们 *** 作 DOM 。
在页面比较简单和逻辑并不复杂的时候，我们可以根据实际情况选择比较简单的选择器方案；当工程逻辑较复杂的时候，我们要考虑组件的复用性、多人协作的不可控性等多种因素，选择方案的时候往往要考虑更多可能的场景。
如上所述，如果我们的使用场景单一，不需要复用的话，我们可以保证获取的 DOM 一致性的时候，可以考虑使用选择器获取 DOM 。
可以使用 documentgetElementXX 开头的方法：
可使用方法如下：
实际使用场景：
页面逻辑复杂的时候会有复用性的问题，如果使用 id 或者选择器就容易引发问题，这时我们可以选择使用 ref 。
ref 可以获取到相应的 DOM 节点，而且也可以得到详细信息，它得到的一个对象，包括 props，state 等。
React 会在组件挂载时给 current 属性传入 DOM 元素，并在组件卸载时传入 null 值。 ref 会在 componentDidMount 或 componentDidUpdate 生命周期钩子触发前更新。
ref 的值根据节点的类型而有所不同：
React 也支持另一种设置 refs 的方式，称为“回调 refs”。
不同于传递 createRef() 创建的 ref 属性，你会传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数，以使它们能在其他地方被存储和访问。
React 将在组件挂载时，会调用 ref 回调函数并传入 DOM 元素，当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。
父组件想要 *** 作子组件且没有控制权的时候可以选择使用 findDOMNode 。
findDOMNode 只在已挂载的组件上可用（即：已经存在 DOM 中的组件）。如果尝试调用未挂载的组件将会引发异常。
findDOMNode 不能用于函数组件。
如果组件已经被挂载到 DOM 上，此方法会返回浏览器中相应的原生 DOM 元素。此方法对于从 DOM 中读取值很有用，例如获取表单字段的值或者执行 DOM 检测。
当组件渲染的内容为 null 或 false 时，findDOMNode 也会返回 null。当组件渲染的是字符串时，findDOMNode 返回的是字符串对应的 DOM 节点。从 React 16 开始，组件可能会返回有多个子节点的 fragment，在这种情况下，findDOMNode 会返回第一个非空子节点对应的 DOM 节点。
$("#content1")
append(
'<table id="1_'//id=1_type
+ type
+ '"><tr><td>分享语句'
+ type
+ '</td></tr><tr>'
+ '<td><div id="wshopshare"></div></td>'
+ '<td><input name="wshopshare" id="wshopshare" type="text" style="width: 440px; "></td>'
+ '<td></td>'
+ '<td><button type="button" id="del1" onclick="componentdeleteAll(\'1\');">删除</button></td>'
+ '</tr></table>');
以上就是关于怎么获取 dom element全部的内容，包括:怎么获取 dom element、html 链接中的href属性 如何获得其他dom的值、jquery 怎样获取一个元素的所有属性比如<div id="T" key='3321' val="234" pid="445"></div>等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）