类数组、获取DOM元素、表单元素的获取、遍历DOM树

JS作用域

1.行内脚本：用在事件属性（onclick）
2.文档脚本：<script>xxx</script>
3.外部脚本：<script src='xxx.js'></script>

类数组

1.纯数组（真数组）

 const colors=['red','green','blue'];
 console.log(colors);
 // 0: "red"
 // 1: "green"
 // 2: "blue"
 // length: 3

特点：
1.每个值对应的键名：从0开始的正整数，如0，1，2，3…
2.有一个length属性，表示数组长度

2.类数组（对象字面量）

const animals={
    0:'dog',
    1:'cat',
    2:'pig',
    length:3,
};
console.log(animals);

类数组与纯数组的区别：原型不一样，纯数组基于构造器Array创建，类数组基于构造器Object创建；类
数组大量用于DOM操作。

3.访问(纯数组与类数组成员访问一样)

console.log(colors[0],colors[1],colors[2]);
console.log(animals[0],animals[1],animals[2]);

获取DOM元素

二种获取模式：
1.一组：使用querySelectorAll(),返回类数组
2.一个：使用querySelector(),返回一个DOM对象

 <ul class="list">
     <li class="iten">item1</li>
     <li class="iten">item2</li>
     <li class="iten">item3</li>
     <li class="iten">item4</li>
     <li class="iten">item5</li>
     <li class="iten">item6</li>
 </ul>

querySelectorAll(css-selector)

参数：css选择器

 // NodeList:节点列表对象
const items=document.querySelectorAll('.list .item');
console.log(items);
// forEach（回调函数）
// function(当前正在遍历的值，当前值的索引/键名)
// 第二个值（当前值的索引/键名）可选
items.forEach(function(v){
    console.log(v);
    v.style.backgroundColor='yellow';
});
// 简化
items.forEach(v=>(v.style.backgroundColor='yellow'));

querySelector(css-selector)

返回“类数组”集合的“第一个”

 // 获取集合中的第一个元素
 const first=document.querySelector('.list .item')
 console.log(first);

注：querySelectorAll和querySelector可以在任何元素上调用

表单元素的获取

 <form action="login.php" method="post" id="login">
   <fieldset class="login">
     <legend>用户登录</legend>
     <label for="email">邮箱:</label>
     <input type="email" name="email" id="email" value="admin@php.cn" autofocus />
     <label for="password">密码:</label>
     <input type="password" name="password" id="password" value="123456" />
     <button>提交</button>
   </fieldset>
 </form>

1.获取表单(form.id)
console.log(document.forms.login);
2.获取表单控件(input.name)
console.log(document.forms.login.email);
3.获取表单控件的值(input.name.walue)
console.log(document.forms.login.email.value);

遍历DOM树

节点类型

1. window:全局对象
2. document:文档对象，html文件
3. element:元素对象，<ul><li><table><form>…
4. text:文本对象，item1，item2…

   <ul class="list">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
   </ul>

   

   let ul=document.querySelector('.list');
   console.log(ul.childNodes);
   // ul.children：只返回元素类型的节点（类数组）
   console.log(ul.children);
   // 将类数组转为真数组
   console.log([...ul.children]);
   // 遍历
   // 第一个
   ul.firstElementChild.style.backgroundColor='yellow';
   // 第二个
   ul.firstElementChild.nextElementSibling.style.backgroundColor='red';
   // 最后一个
   ul.lastElementChild.style.backgroundColor='green';
   // 最后一个的前一个
   ul.lastElementChild.previousElementSibling.style.backgroundColor='blue';
   // 父节点（元素节点或文档节点）
   ul.lastElementChild.parentElement.style.border='2px solid red'