0106作业

1. 举例说明构造函数的原型与对象原型之间的区别与联系

答：对象原型指向它的构造函数的原型，对象原型继承构它的造函的原型的成员（方法和属性），对象的原型proto和它构造器的原型prototype恒等。

2. 举例演示获取dom元素的常用方法

答：

<ul   id="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>
<li   class="item">item7</li>
</ul>

以次为例来获取：
// 获取所有的#list下面所有li
//返回 NodeList 对象（是类数组。实际上是一个集合）
let list=document.querySelectorAll("#list li")
//现在来转化成真正的数组,
方法一：
let listarr=Array.from(list);
方法二:

let  listarr=Array.from([...list]);
//NODElist可以直接使用forEach()来遍历
list.forEach(function(item,index,listarr){
console.log(item);
})

简化：
list.forEach((item)=>(console.log(item));

获取第一个列表元素：

let  first=document.querySelectorAll("#list li:first-of-type")//返会集合，哪怕只有一个元素
直接获取第一个元素：
let  first=document.querySelector("#list li")//返回元素

快速获取某一个或者某一类元素：

document.documentElemrnt //html
document.body   //body
document.title   //title

3. dom元素的增删改查常用操作，全部实例演示，并配图

答案：添加：

源码：

document.write();
clear();
let  doc=document.createElement('ul');
doc.setAttribute('id','list');
doc.innerHTML='<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><li   class="item">item7</li>';
document.appendChild(doc);
console.log('开始创建节点，插入到ul中：');
document.createElement('li');
document.createElement('li');
let  liitem8=document.createElement('li');
liitem8.setAttribute('class','item');
doc.appendChild(liitem8);
liitem8.innerText="item8";
liitem8.style.color="red";
console.log('利用文档片段批量添加：');
const   fc=new  DocumentFragment();
for(let i=0;i<=3;i++){      const  li=document.createElement('li');   li.textContent="okay"+i;     fc.appendChild(li);  }
doc.appendChild(fc);
console.log('%cinsertAdjacentHTML','color:cyan');
let  str='<li>start1</li><li>start2</li><li>start3</li>';
doc.insertAdjacentHTML('afterbegin',str);

更新操作：

源码：
续上

let  p=document.createElement('p')
p.textContent="hello ,更新进来的元素"
p.style="color:cyan"
document.querySelector("ul li:nth-of-type(1)").replaceWith(p)
doc.replaceChild(p,document.querySelector('ul li:last-of-type'))

删除操作：

源码：

console.log('移除节点')
doc.removeChild(document.querySelector('ul').lastChild);
doc.removeChild(document.querySelector('ul').firstChild);

console.log('统计节点：');
doc.children；
doc.children.length；
doc.childElementCount