js如何获取根元素_框架

简单说 windowparent是获得父窗口的window对象，

windowtop是获得最顶层的window对象(多frame嵌套)

所以对于你这个页面 windowparent windowtop都可以实现

先说一下JS的获取方法，其要比jQuery的方法麻烦很多，后面以JQUERY的方法作对比。

JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素

</div>

原生的JS获取ID为test的元素下的子元素。可以用：

var a = docuemntgetElementById("test")getElementsByTagName("div"); 这样是没有问题的

此时alength=2；

但是如果我们换另一种方法

var b =documentgetElementById("test")childNodes;

此时blength 在IE浏览器中没问题，其依旧等于2，但是在FF浏览器中则会使4，是因为FF把换行也当做一个元素了。

所以，在此，我们就要做处理了，需遍历这些元素，把元素类型为空格而且是文本都删除。

function del_ff(elem){

var elem_child = elemchildNodes;

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

if(elem_child[i]nodeName == "#text" && !/\s/test(elem_childnodeValue))

{elemremoveChild(elem_child)

}

上述函数遍历子元素，当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。

nodeNames可以得到一个节点的节点类型，/\s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符

test() 方法用于检测一个字符串是否匹配某个模式语法是： RegExpObjecttest(string)

如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

nodeValue表示得到这个节点里的值。

removeChild则是删除元素的子元素。

之后，在调用子，父，兄，这些属性之前，调用上面的函数把空格清理一下就可以了

</div>

function dom() {

var s= documentgetElementById("test");

del_ff(s); //清理空格

var chils= schildNodes; //得到s的全部子节点

var par=sparentNode; //得到s的父节点

var ns=snextSbiling; //获得s的下一个兄弟节点

var ps=spreviousSbiling; //得到s的上一个兄弟节点

var fc=sfirstChild; //获得s的第一个子节点

var lc=slastChile; //获得s的最后一个子节点

}

</script>

下面介绍JQUERY的父，子，兄弟节点查找方法

jQueryparent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span")parent()或者$("span")parent("class")

jQueryparents(expr),类似于jQueryparents(expr),但是是查找所有祖先元素，不限于父元素

jQuerychildren(expr)返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

jQuerycontents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个

jQuery对象返回，children()则只会返回节点

jQueryprev()，返回上一个兄弟节点，不是所有的兄弟节点

jQueryprevAll()，返回所有之前的兄弟节点

jQuerynext(),返回下一个兄弟节点，不是所有的兄弟节点

jQuerynextAll()，返回所有之后的兄弟节点

jQuerysiblings(),返回兄弟姐妹节点，不分前后

jQueryfind(expr),跟jQueryfilter(expr)完全不一样。jQueryfilter()是从初始的jQuery对象集合中筛选出一部分，而jQueryfind()

的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从<p>元素开始找<span>,等同于$("p span")

Jquery的遍历，其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素。以某项选择开始，并沿着这条线进行移动，或向上（父级）、或向下（子级）、或水平（同级），直到找到目标元素为止，这种移动也被成为对DOM进行遍历。

其实对于DOM来说，这个不陌生，Jquery的遍历也就是在DOM树上上蹿下跳，当然这种上蹿下跳不是没有规则的，胡乱的找是让人鄙视的。通俗的说，在一颗树上（你也在树上，已经爬上去了，哈哈），以你所在的位置为起点，以树上有个桃子为目的地，你的这个起点也就是当前 this ,去移动去摘桃子的过程就是Jquery遍历，所以相对应的Jquery所衍生出的遍历方法可以分为三大类，即Jquery遍历之父级（祖先）、同级（同胞）和子级（后代）三种。

<body>

<tr>

</tr>

</table>

</body>

获取标签建议还是用ID来获取,简单方便

用getElementById("tbeTarget")可获取table

用getElementById("tips2")可获取到tips2

有ID的话,getElementById("tbeTarget")tips2也能得到你要的 tips2

特殊情况实在不能用ID时,也可用getElementsByTagName

var o=documentgetElementsByTagName("table"); 这个就获取到了所有的table标签,返回值是数组类型的

像你这个代码的话,只有个一个table,那 o[0]就是你要的table标签了

实在要用getElementByClassName的话,

var o=documentgetElementByClassName("tbeTarget");

var ot=ogetElementsByTagName("td"); //直接用ogetElementByClassName("tips2")应该也可以

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

if(ot[i]class=="tips2"){

alert(ot[i]); //在这if里面,用ot[i]调用到的就是你要的 tips2了

}

方法有两种：

1、通过jquery的方式，使用id选择器方式获取节点，然后获取值。

2、通过原生的dom方式，获取id的值。

每一个HTML元素都使用id来进行一个标注，随后可以通过documentgetElementById(“ID名称”)取得指定的ID元素对象，取得元素对象之后就可以对其进行 *** 作。

但是documentgetElementById()只能取得一个元素信息。

documentgetElementById(“id”) 获取到的是整个对象。

documentgetELementById(“id”)innerHTML；才可以获取到其中的内容。

documentgetElementById('con')获取的只是P标签，返回的[objectHTMLParagraphElement]。

documentgetElementById('con')innerHTML获取的才是P标签里的内容，返回的是JavaScript。

扩展资料：

JavaScript脚本语言具有以下特点:

(1)脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等 *** 作JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于 *** 作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提上机器上的浏览器支持JavaScript脚本语言，目前JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。

而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。

同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Nodejs的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。

参考资料来源：百度百科-javascript

<div class="c f" onclick="fn()" style="border:10px solid #ccc;height: 80px;color:red;background:rebeccapurple"> 我是div</div>

let div = documentquerySelector('div');

/ 通过style在行内样式上获取样式 /

/ 使用style获取样式写的什么就能获取到什么

不会转成rgb 和出现其他的样式 /

consolelog('style',divstylecolor )

consolelog('style',divstylebackground )

/ style是获取不到在内部样式上或者外部样式上的样式的 /

// consolelog( divstylecolor )

// / font-size js中要是用驼峰的方式获取 /

// consolelog( divstylefontSize )

/ 使用windowgetComputedStyle可以获取行内、内部、外部的所有样式

但是获得color是rbg格式的，获取的background是所有属性 /

consolelog( windowgetComputedStyle(div,null)color )

consolelog( windowgetComputedStyle(div,null)fontSize )

consolelog( windowgetComputedStyle(div,null)background )

consolelog( windowgetComputedStyle(div,null)height )

// documentonscroll = function (){

// consolelog(documentdocumentElementscrollTop);

// }

</script>

思路：用getElementsByTagName方法来实现。

片断代码如下：

<html>

<head>

function getElements()

{

var x=documentgetElementsByTagName("input");

alert(xlength);

}

</script>

</head>

<body>

<br />

</body>

</html>

效果图如下：

定义和用法

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

以上就是关于js如何获取根元素全部的内容，包括:js如何获取根元素、Javascript封装同胞节点思路、js中如何获取div下的二级子元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

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

js如何获取根元素

发表评论

评论列表（0条）