转码日记——Javascript笔记（11）DOM查询

DOM — document object model 文档对象模型，目的是通过JS来操作网页

文档：html文档（网页）对象：将网页中的每个部分都转换成了一个对象 模型：使用模型来表示对象之间的关系

网页里的每一个部分都是节点，常用的节点分为四类：（1）文档节点 — 整个html文档（2）元素节点 — html文档中的html标签（3）属性节点 — 元素的属性 如id=“”（4）文本节点 — html标签中的文本内容

 浏览器已经为我们提供了文档节点，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页。

//获取id是btn的button对象

var btn = document.getElementById("btn");
//document就是html对象

//修改按钮的文字（inner.HTML）

btn.innerHTML = "I am button";

事件

文档或浏览器窗口中发生的一些特定的交互瞬间，如点击按钮，关闭窗口，移动鼠标等。我们可以在事件对应的属性中设置一些JS代码，当事件被触发时，这些代码将会执行。

可以为按钮的对应事件绑定处理函数的形式来响应事件，当事件被触发时，其对应的函数将会被调用。

//获取对象
var btn = document.getElementById("btn");
//使用函数绑定一个单击事件
btn.onclick = function(){
    alert("stop!");
};
//像这种为单击事件绑定的函数，我们称之为单击响应函数
//当事件被触发时，函数执行，这个函数叫响应函数

文档的加载

浏览器加载页面时，按照从上到下的顺序，读取一行就运行一行。如果<script>标签写在最上面，在js代码执行的时候，下面的html还没有加载，就可能出现点击按钮没有反应的情况，因为页面没有加载，DOM对象也没有加载，js代码获取不到。

可以使用onload,可以使事件在页面加载之后再触发。直接将整个window对象绑定上onload，这样页面加载出来，才会执行js代码。

window.onload = function(){
    var btn = document.getElementById("btn");
    btn.onclick = function(){
    alert("stop!");
};
};
/*onload事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的dom对象都已经加载完毕*/

DOM查询（一）

获取元素节点，通过document对象调用。

1. document.getElementById() — 通过id属性获取一个元素节点对象

2. document.getElementsByTagName() — 通过标签名获取一组元素节点对象

3. document.getElementsByName() — 通过name属性获取一组元素节点对象

练习

//点击按钮查找所有li节点
var btn2 = document.getElementById("btn2");
btn2.onclick = function () {
    var lis = document.getElementsByTagName("li");
//该方法会给我们返回一个类数组对象，所有的查询到的元素都会被封装到对象中
    alert(lis.length); // 可以判断是否执行了上述代码
    //或者也可以遍历
    for (i = 0; i < lis.length; i++) {
                    alert(lis[i].innerHTML);
                }
};

// innerHTML只能用于获取元素内部的html代码，对于自结束标签（单标签），这个属性没有意义。

<input type="radio" name="gender" value= "female">
<input type="radio" name="gender" value= "male">

//双击button后读取name属性=
//现在是想要读取input标签内部的value属性验证是否成功
//如果需要读取元素的属性，直接写元素.属性名即可
var btn03 = document.getElementById("btn03"); //获取按钮本身
btn03.ondblclick = function(){
    var inputs = document.getElementsByName("gender");
    for(i=0;i<inputs.length;i++){
            alert(inputs[i].value);
//input标签之后不再是innerHTML，其用于获取元素内部的html代码，input是单标签，没有内容
}
};

* 如果需要读取元素节点属性，直接使用元素.属性：元素.value/ id/ name等；唯独class属性不行采取这个方式，而是使用元素.className 

练习— 切换图片

window.onload = function (){
//获取按钮
var prev = document.getElementById("prev"); //获得上一张的按钮
var next = document.getElementById("next"); // 获得下一张的按钮


//创建数组封装图片的src属性
//获取img标签
var img = document.getElementByTagName("img")[0]; 
// 不写0的话获取到的是一个数组，写上索引确定获取数组中的第一个
var imgArr = ["","","","",""];
var index = 0; //作为数组中索引的变量


//获取p标签
var info = document.getElementById("info");
//设置提示文字
info.innerHTML = "一共" + imgArr.length + "张图片，当前第" + (index + 1) + "张";


prev.onclick = function (){ //单击上一张按钮会切换下一张
    //index自减改变索引
    index--;
    if(index < 0){
        index = imgArr.length-1; //往前点没有了到最后一张，循环转
        }
    //切换图片就是改变图片的src属性
    img.src = imgArr[index]; //这里不能写死成数字
    info.innerHTML = "一共" + imgArr.length + "张图片，当前第" + (index + 1) + "张";
};

next.onclick = function (){ 
    //indext自增
    index++;
    if (index>imgArr.length-1){ //.length是索引最大值+1所以要-1
        index= 0; //点击到最后一张是返回第一张    
}
    img.src = imgArr[index]; 
    info.innerHTML = "一共" + imgArr.length + "张图片，当前第" + (index + 1) + "张";
};
};

DOM查询（二）

获取元素节点的子节点，通过具体的元素节点调用。

方法：getElementsByTagName( ) 

属性：childNodes — 获取当前节点的子节点(包括文本节点） ，根据DOM标签，标签间空白也会被当作文本节点。

firstChild — 当前节点的第一个子节点 （包括空白文本节点）

lastChild— 当前节点的第二个子节点

//查找#city下所有的li节点
//获取#city
var city = document.getElementById("city");
//查找city下所有li
var list = city.getElementsByTagName("li");

子节点和子元素的区别：

var cnd = city.childNodes; //获取city下所有的子节点，DOM标签间空白也会被当作文本节点
cnd = city.children; // 获取city下所有的子元素，不是子节点，这时不会包含空白

var fe = city.firstChild; //获取第一个字节点，如果是空白节点会返回text
fe = city.firstElmentChild; // 获取第一个子元素，则不包含空白节点

获取母节点和姊妹节点。

属性：parentNode — 返回母节点，不包含空白文本节点，也不是一个数组。

previousSibling — 当前节点的前一个姊妹节点，也会获取到一个空白文本。如果是previousElementSibing则会确定获取前一个元素。

nextSibling — 当前节点的下一个姊妹节点。

//如果都需要先获取按钮，则可以设置一个函数，专门用来为指定元素绑定单击响应函数
//idStr是要绑定函数的元素的id值，fun是事件的回调函数，当单击时，事件被触发
function myClick(idStr, fun){
    var btn = document.getElementById(idStr);
    btn.onclick = fun;
} 
//函数也是对象，是对象就可以作为参数


//点击第七个按钮可以返回id为北京的母节点
myClick("btn07",function(){}
//获取id为北京的节点
var bj = document.getElmentById("北京");
//找母节点
var pn = bj.parentNode;
alert(pn.innerHTML); //打印出来html的框架和文本内容 如<li>北京</li>
); 

*但是如果使用innerText 则只打印元素内容，不会打印出元素的html标签。

alert(pn.innerText); //返回北京、上海...

DOM查询（三）

如果使用document.getElementsByTagName( ); 获取body，则获取到的是一个collection. 所以想要直接获取body，可以使用document.body

在document中有一个body属性，它保存的是body的引用。

var body = document.body;

document.documentElement; 保存的则是html这个根标签

document.all; 代表的是页面中所有的元素，html,body标签等也算

document.getElementsByClassName( ); 可以根据元素的class属性值查询一组元素节点对象，但是该方法不支持IE8及以下的浏览器

🌟 document.querySelector( ); — 需要一个选择器的字符串作为参数，可以根据css选择器来查询一个元素节点对象，IE8也支持；使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，它只会查询并返回到第一个。

//css选择器为.box1 div
var box1 = document.querySelector(".box1 div");

document.querySelectorAll( ); — 该方法和document. querySelector( ); 类似，不同的是它会将多有满足条件的元素封装到一个数组中返回；即使符合条件的元素只有一个，也会返回数组。