获取节点  document.getElementBy{Id,Name,TagName,ClassName

document.getElementById(" ");

document.getElementByName(" ");

document.getElementByTagName(" ");

以上三个可以兼容IE6-IE8,兼容性很好,随便用。

以下三个要用的比较新的浏览器中:

getElementByClassName(" ");

querySelector();

querySelectAll();

 

获取节点  document.getElementBy{Id,Name,TagName,ClassName

==============document.getElementById("")=====================

解决document.getElementById("")在IE7中误读成name的bug。

修复getElementById在IE7以下误读BUG
     <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
          <script>
              myReady(function(){
                //var div=document.getElementById('container');//获取div对象
                //console.log(div.tagName);
                //console.log(div.getElementById("ul1"));//getElementById("")只能使用document进行调用,其他的不行。
                
                //var btn=document.getElementById("button");//获取按钮对象
                //btn.onclick=function(){
                //    var target=document.getElementById("target");//获取>
                  <li></li>
                  <li></li>
                  <li></li>
              </ul>
          </div>
      </body>

=========================

获取节点  document.getElementBy{Id,Name,TagName,ClassName

这是获取多个对象的,所以其elements是复数,有s。别少了 s 。

获取节点  document.getElementBy{Id,Name,TagName,ClassName

获取节点  document.getElementBy{Id,Name,TagName,ClassName

获取节点  document.getElementBy{Id,Name,TagName,ClassName

 

 

document.getElementBy{Id,Name,TagName,ClassName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
<script>
//这是一段注释//
myReady(function(){
//=============document.getElementById=================
//var div=document.getElementById('container');//获取div对象
//console.log(div.tagName);
//console.log(div.getElementById("ul1"));//getElementById("")只能使用document进行调用,其他的不行。

//var btn=document.getElementById("button");//获取按钮对象
//btn.onclick=function(){
// var target=document.getElementById("target");//获取).tagName);


//=============document.getElementsByName=================
// var li=document.getElementsByName("chose");
// console.log(li);//返回的是NodeList类数组对象
// console.log(li.item(1));//获得类数组对象第二个对象,上下两个相等
// console.log(li[1]);//获得类数组对象第二个对象,上下两个相等
// console.log(li.length);//获得类数组对象长度

//=============document.getElementsByTagName=================
// var li = document.getElementsByTagName("li");
// console.log(li);//HTMLCollection类数组对象
// console.log(li.length);//HTMLCollection长度
// console.log(li[0]);//上下两个相等,都是获取类数组对象的第一个对象。
// console.log(li.item(0));//上下两个相等,都是获取类数组对象的第一个对象。
// console.log(li[0].id);//获取类数组对象第一个对象的id属性。
// console.log(li.item(0).innerHTML);//获取类数组对象第一个对象innerHTML属性值。


// //其他浏览器都会抛出错误。+只在IE8以下才有效,第一个返回的 一定是: DOCTYPE html。
// var comment=document.getElementsByTagName("!");//表示全文注释的点
// console.log(comment[0].nodeValue);//返回:DOCTYPE html
// console.log(comment[1].nodeValue);//如下注释才有效,返回 <!--必须导入该文件,搜狗输入domready.js-->

// var all=document.getElementsByTagName("*");//获取所有元素集合
// console.log(all);//返回的是HTMLCollection类数组对象
// for (var i=0,len=all.length; i < len; i++) {
// console.log(all[i].tagName);
// }
//============以上3个获取对象的方法所有浏览器都实现了,兼容性好===========

//============以下3个获取对象的方法就需要较新的浏览器才可以兼容了===========
//======obj.getElementsByClassName:在对象obj下面获取对应类名的标签对象=======
// var ul=document.getElementById("ul2");//获得ul对象
// var objs=ul.getElementsByClassName("one");
// console.log(objs);//获得HTMLCollection类数组对象
// console.log(objs.length);//获得HTMLCollection类数组对象的长度
// console.log(objs[0]);//在ul下面 获取第一个: class="one"的标签对象 li
// console.log(objs[1]);//在ul下面 获取第二个: class="one"的标签对象 li
// console.log(objs[2]);//在ul下面 获取第三个: class="one"的标签对象 span
// var objss=ul.getElementsByClassName("one two");////获取多个类名的一个HTMLCollection类数组对象
// console.log(objss);//HTMLCollection类数组对象
// console.log(objss[0]);//在ul下面 获取类名: class="one two"的标签对象 类名不分先后
// console.log(objss[1]);//在ul下面 获取类名: class="one two"的标签对象 类名不分先后

 

// ======obj.querySelector("")里面参数是CSS选择器======
// ======obj.querySelectorAll("")里面参数是HTML标签名称,返回的NodeList类数组对象======
//
// console.log(document.querySelector("#ul1"));//在文档中查找));////对于不存在的input标签对象,返回空的NodeList类数组对象。


// 不会死循环 staticNodeList
//在文档中查找))
}


// 死循环 NodeList
//在文档中查找))
// }

});
</script>
<body>
<div ></li>
</ul>
</div>
</body>

 

相关文章:

  • 2021-12-16
  • 2021-08-25
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-17
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2019-09-08
  • 2022-12-23
  • 2022-12-23
  • 2021-09-06
  • 2021-11-29
相关资源
相似解决方案