1、打开编辑工具editplus，点击editplus菜单栏上的File-->New -->HTML page。
2、新建好html页面后，editplus自动帮助我们生成了框架，先把title修改下，然后保存。
3、在body区域里添加了子，父，祖父三级div，代码如下。
4、演示代码写好后，打开浏览器，在浏览器上运行看看效果。
5、下面在head区域里添加实现js获取最高父级的代码，代码具体如下，这样利用了while循环来判断的。
6、实现好后，保存代码，此时再到浏览器上刷新访问，看下，此时d出对话框告诉最后父级是zufu。
非IE6,7,8可以直接用自带的属性 getElementsByClassName,如果需要考虑兼容，就需要自己写了。下面是自己写的：
function getClassName(obj,sName) //-->obj是要获取元素的父级
{ //-->sName是class名字
if(documentgetElementsByClassName)
{
return objgetElementsByClassName('sName');
}
else
{
var aTmp = objgetElementsByTagName('');
var aRes=[];
var arr =[];
for(var i=0;i<aTmplength;i++)
{
arr = aTmp[i]classNamesplit(' ');
for (var j=0;j<arrlength;j++)
{
if(arr[j] == sName)
{
aRespush(aTmp[i]);
}
}
}
return aRes;
}
}
大概思路，是将你要获取class元素父级下的所有元素都取出来，再循环查找className，满足的元素存到数组中，然后返回。
js获取div里的元素个数方法是：先得到父元素，再得到父元素下的某标签类别的子元素，最后统计出子元素的长度就可以简单实现了。
js 动态添加元素(div、li、img等)及设置属性的方法：
一、js 动态添加元素div
<div id="parent"></div>
function addElementDiv(obj) {var parent = documentgetElementById(obj);//添加 divvar div =
documentcreateElement("div");//
设置 div 属性，如 iddivsetAttribute("id", "newDiv");divinnerHTML = "js 动态添
div";parentappendChild(div);}
调用：addElementDiv("parent");
二、js 动态添加li
<ul id="parentUl"><li>原li</li></ul>
function addElementLi(obj) {var ul = documentgetElementById(obj);//添加 livar li =
documentcreateElement("li");//
设置 li 属性，如 idlisetAttribute("id", "newli");liinnerHTML = "js 动态添加li";ulappendChild(li);}
调用：addElementLi("parentUl");
三、js 动态添加元素img
<ul id="parentUl"></ul>
function addElementImg(obj) {var ul = documentgetElementById(obj);//添加 livar li =
documentcreateElement("li");//添加 imgvar img = documentcreateElement("img");//
设置 img 属性，如 idimgsetAttribute("id", "newImg");//设置 img 地址imgsrc =
"/images/prodjpg";
liappendChild(img);ulappendChild(li);}
调用：addElementImg("parentUl");
js获取元素方法有：
1、getElementById ：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。
2、getElementsByName：getElementsByName(name)该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以getElementsByName() 方法返回的是所有匹配元素组成的数组，而不是一个元素。
3、getElementsByTagName：getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。
getElementsByTagName() 可被用于任何的 HTML 元素
如果把特殊字符串 "" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
假定数组名为a，则a[0]就是第一个元素。
var ary=[1,2,3,4];
var a=aryshift();//a=1;ary=[2,3,4];
arrayObjslice(start, [end])
slice 方法返回一个 Array 对象，其中包含了arrayObj 的指定部分。
参数：start，截取数组开始下标。end截止的下标，但不包括end元素
扩展资料：
JavaScript被归类为直译语言，因为主流的引擎都是每次运行时加载代码并解译。V8是将所有代码解译后再开始运行，其他引擎则是逐行解译（SpiderMonkey会将解译过的指令暂存，以提高性能，称为实时编译），但由于V8的核心部分多数用JavaScript撰写（而SpiderMonkey是用C++），因此在不同的测试上，两者性能互有优劣。
与其相对应的是编译语言，例如C语言，以编译语言编写的程序在运行之前，必须经过编译，将代码编译为机器码，再加以运行。
参考资料来源：百度百科-javascript
一、获取img标签的src属性值
var imgStr = "<p><img src='>
思路：用getElementsByTagName方法来实现。
片断代码如下：
<html><head>
<script type="text/javascript">
function getElements()
{
var x=documentgetElementsByTagName("input");
alert(xlength);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many input elements" />
</body>
</html>
效果图如下：
定义和用法
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
要获取其他文件下的元素，那么当前页面和另外的页面必须有关联才可以。
比如要从iframe的子页面，获取父页面的元素可以这样写：
parentdocumentgetElementById('a1');
比如要从windowopen的页面中，获取父页面的元素可以这样写：openerdocumentgetElementById("a1");
以上就是关于js获取父级元素全部的内容，包括:js获取父级元素、js怎么根据class获取元素、js获取div里的元素个数等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）