javascript--第五天---获取对象的其他方式

单个对象:

var box = document.getElementsById("box");
console.dir(oBox);//打印对象详情 var wrap = document.querySelector("#box .wrap"); 不兼容ie7及一下浏览器

多个对象

集合:需要通过【序号】来获取对应的标签节点,即便只有一个

document.getElementsByClassName()不兼容ie678及一下浏览器
document.getElementsByTagName()
document.getElementsByName()
document.querySelectorAll()
不兼容ie7及一下浏览器

通过id直接获取 极其不推荐,但是调试好用,在控制台直接打印box就行

<div id="box"></div>
console.dir(box);

通过document 直接获取 包括head title body

console.log(document.head); 获取元素document.head 给元素赋值document.title="hello";

通过类名获取 获取的时一个类数组 ie8以下不兼容

var box = document.getElementsByClassName("box");

box[0]代表第一个box

通过标签获取 获取的时一个类数组

var divs =  document.getElementsByTagName("div");

通过name获取 获取的时一个类数组

<input type="text" name="user">
var ipts = document.ElementsByName("user");

对于类名/标签名/name 我们可以先确定选择范围 在进行下一步选择

第一步 var obox = document.getxxxx
第二步 obox.getxxxxx 进行进一步查找

通过querySelector 查询选择器 ,性能极低

<div id="box">
    <div class="wrap"></div>
</div>
 <div class="wrap"></div>
 var wrap = document.querySelector("#box .wrap");

需要注意的是一定要带上选择器的标识符,id就要写# class就要写点

var wrap = document.querySelector(".wrap");

此时满足条件的有两个,但是只会取第一个 <div id="box"><div class="wrap"></div></div>

var wrap = document.querySelectorAll(".wrap");  

如果精准获取就document.querySelectorAll("#box .wrap")但是也得加下标 wrap[0]

此时是个集合,会取所有满足条件的 wrap[1]代表取第一个

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul class="season">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
要获取夏
var mytext = document.querySelector(".season>li:nth-child(2)").innerHTML;

判断时应该注意什么

  1. 不要使用颜色做判断 console.log(getComputedStyle(oBox)["background-color"]);console.log(oBox.style.backgroundColor);两个的结果不一样
  2. 不能用复合属性做判断
  3. 不能用url做判断 涉及到字符串的转换 和相对/绝对路径

静态获取和动态获取

静态获取

  1. 对于getElementById 获取到元素之后不会重新获取 可以对他进行随意更改

动态获取

  1. 对于getElementByTagName getElementByClassName getElementByName 元素是动态获取 获取到元素之后不会重新获取
  2. querySelector querySelectorAll都为静态获取
<body>
    <div id="box">123</div>
</body>
<script>
    var oBox = document.getElementById("box");
    oBox.id = "lisi";
    oBox.innerHTML = "hahaha";
</script>

成功执行

var aBox = document.getElementsByClassName("mybox");
var
    aBox[0].className = "lisi";
    aBox[0].innerHTML= "heihei";

这样没有效果

var aBox = document.getElementsByClassName("mybox");
    var mybox = aBox[0];
    mybox.className = "lisi";
    mybox.innerHTML= "heihei";

这样就可以

阅读更多
想对作者说点什么? 我来说一句

对象获取

2013年10月19日 1KB 下载

没有更多推荐了,返回首页

不良信息举报

javascript--第五天---获取对象的其他方式

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭