documentquerySelector(domSelector)getBoundingClientRect();
//获取dom元素的top,left,width,height,x,y,right,bottom
for(var i=0;i<objlength;i++){if(obj[i]className == 'a')//找出span标记中class=a的那个标记{var getObj = obj[i];value = getObjinnerHTML;//获得他的innerHTML}}//或者通过Jquery,ext,等JS插件来处理也可以。。。
有一定的JS基础后，就可以进入 dom 环节了，dom使得网页的交互效果得到完美呈现，可以说dom真正打开了网页和用户之间的通道桥梁，日常生活中我们点击鼠标，敲击键盘，甚至于无意间触碰到屏幕（触摸屏），都会或多或少或大或小的得到一些躲藏起来的内容。
打开淘宝，在输入框输入商品时，下拉的推荐商品：
或是当打开某个不想再浏览的网页时，右上角的那个×：
这些大部分都存在DOM的身影。
这里的“DOM”，通常来讲，叫做 DOM 文档对象模型 ， 通过 *** 纵DOM，可以随意更改内容，样式，或者增删改查 ，因为网页是在浏览器中显示的，整个浏览器是BOM，所以DOM其实是BOM的一部分，BOM 就是 window对象 ，DOM 就是 document（文档）对象。
如果该元素，是网页的必备元素，而且只能有一个，可以通过document对象直接获取。比如：的src属性：
任由我们怎么去修饰的显示，但它本身的路径属性是独有的，所以我们可以直接获取：
更多的时候，我要需要获取网页中的指定元素，这就需要专门的方法来获取了，这里列举几个方法：
getElementById()方法，根据元素的id属性值来获取指定的元素，因为ID的唯一性，使得该方法需要搭配ID选择器使用，如果网页里ID重复时，它会获取第一个：
getElementsByTagName()方法，根据元素的标签名获取所有该元素，该方法获取的是所有该标签的元素，以伪数组的形式呈现：
getElementsByClassName()方法，根据元素的类选择器名称获取所有该元素，该方法获取的途径是标签的类，也就是class属性，由于拥有该属性的标签可能不只一个，所以该方法获得的也是一个伪数组（还有，可以看方法名，凡是带Elements的大多数都是伪数组）：
getElementsByName()方法，根据元素的name属性值获取所有该元素，相同的性质，有name属性的标签也不少：
querySelector()方法，根据选择器的名称返回元素，如果有多个元素，只返回第一个元素，这个方法就比较常用了，而且IE这个啥也不咋适配的浏览器现在几乎不咋能见到了，可以多多考虑用他了该方法是 ES6新增，无论是ID 还是class都可以选，但是和上面区别的是选ID时前面要加#号，选class时前面要加“”：
区别于Elements，这里是个单数，所以只会获取一个，要是想获取多个相同的，就用querySelectorAll()吧！querySelectorAll()看这个ALL就知道它是用来选全部的：
最后这俩方法更实用，可以选取CSS几乎所有选择器，而且querySelectorAll()得到的数组数据后还可以使用数组的方法。
*** 作DOM的样式 ，有多种方式：
通过style属性直接设置
通过className属性设置类选择器
也可以通过classList属性添加多个类选择器
*** 作DOM的内容：
innerText属性，用于获取 和 *** 作 DOM的文本内容。
innerHTML属性，用于获取 和 *** 作 DOM的HTML内容：
createElement()方法，用于创建DOM元素：
appendChild()方法，用于在当前DOM元素中添加子元素：
自删 remove()方法，是元素删除自己:
通过父级删除子级 removeChild()方法，是删除元素里面指定的子元素:
最近碰到一个Angular中无法获取DOM进行实例化的问题：记录一下
项目使用 Project Clarity 框架，父组件中包含子组件，父组件中用d框控制子组件的显示和隐藏，当d框显示时，ng读到父组件中的子组件，然后进行加载渲染，但是TS的执行在DOM渲染完成之后，因为我试图在ngAfterViewInit中获取DOM元素，用getElementById取到的值居然是null，而getElementsByClassName获取到对象，但是用数组方式访问时却不识别，百思不得其解
通过Debug我发现，当子组件TS执行时，父组件页面中的DOM并未加载出来，我使用定时器延迟之后就可以了，刚开始我以为是ngIf 的问题导致了这个执行顺序错误，
为了解决这个问题，我另外写了个demo，父组件控制子组件的显示，但是demo中并未出现项目中的问题，我可以在ngAfterViewInit中获取到子组件的DOM，因此我判断是 Project Clarity 框架的原因，他的d框使得DOM的加载慢了一点
但是使用ElementRef可以获取到在框架中获取不到的DOM，但是因为项目逻辑问题，这个方法并不能解决我的问题
问题找到了，但是没有解决，很郁闷！
一,获取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函数
以上就是关于JS中怎样取得DOM 元素位置全部的内容，包括:JS中怎样取得DOM 元素位置、js 如何根据class获取对象、DOM的理解与 *** 作等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）