Collection
Collection
DOM:Document Object Model 文档对象模型
DOM：指当前要操作的文档内容，准确的说就是HTML文档，其实还包括XML文档
文档树：html文档中的内容以树形结构呈现的
节点：文档中组成部分，node类型，节点对象
节点类型：最常用的只有三种类型的节点：document文档节点，element元素节点，text文本节点
-------------------------------------------------------------------------------------------------------
2.选择页面元素的方法
<h3 id="header" class="red" style="color:greeen" title="php.cn" name="username">php中文网</h3>
1、ID选择器： getElementById('header');
2、CLASS选择器： getElementsByClassName('red')
3、tagname选择器： getElementsByTagName('h3')
4、name选择器： getElementsByName('username')
5、CSS选择器： querySelector() ,querySelectorAll()
6、元素的属性：添加，删除，更新
-------------------------------------------------------------------------------------------------------
3，DOM元素的操作
1、创建： createElement('p')
2、插入： parentNode.appendChild('p')
3、删除： removeChild('p')
4、更新： replaceChild('p',old)
-------------------------------------------------------------------------------------------------------
4、DOM实战：
-------------------------------------------------------------------------------------------------------
1、根据id属性获取元素
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<ul id="lists">
<li id="item1">列表项01</li>
<li>列表项02</li>
<li id="item2">列表项03</li>
<li>列表项04</li>
<li id="item3">列表项05</li>
</ul>
<script>
// 通过函数来简化以上的操作
function getElements(){ //参数是多个id字符串
let elements = {}; //保存获取到的dom对象元素
for(let i=0;i<arguments.length;i++){
let id = arguments[i]; //获取参数id的字符串
let elt = document.getElementById(id); //根据id字符串
if(elt === null){
throw new Error('没有这个元素'+id); //抛出异常
}
elements[id] = elt; //将获取到的元素保存到结果集合中
}
return elements; //将获取到的元素返回
}
// 根据id获取页面上的指定元素，返回一个关联数组对象，键名就是id
let elements = getElements('item1','item2','item3');
console.log(elements);
for(let key in elements){
elements[key].style.backgroundColor = 'red';
}
</script> 2.根据name属性获取元素
<!-- name属性并不是所有元素都有，只有一些特定元素才会有，表单，表单内的元素，图像，ifrane -->
<form action="" name="login">
<input type="text" name='username'>
<input type="password" name='password'>
<button name="botton">提交</button>
</form>
<script>
// getElementsByName返回的是一个节点数组
let login = document.getElementsByName('login')[0]
// console.log(login);
// 我们可以把name属性当成document对象的属性来用
let login1 = document.login;
// console.log(login1);
login1.style.backgroundColor = 'green';
</script>可以把name属性当成文档对象属性来使用
3.根据标签名来获取元素
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
<script>
let ul = document.getElementsByTagName('ul')[0];
ul.style.backgroundColor = 'green';
// 返回的是一个元素的集合，就会有一个length
console.log(document.getElementsByTagName('ul').length);
//元素的集合其实是一个对象，它的上面有一个方法：itme（）
let ull = document.getElementsByTagName('ul').item(0);
ull.style.backgroundColor = 'lightblue';
// 获取所有li元素
let uli = document.getElementsByTagName('li')
for(let i=0;i<uli.length;i++){
uli[i].style.backgroundColor='lightpink';
}
// 改方法不仅定义文档对象，还可以在元素对象上使用
let ui = document.getElementsByTagName('ul').item(0);
let uli1 = ui.getElementsByTagName('li').item(1);
uli1.style.backgroundColor = 'green';
</script>
4.name属性和标签名获取元素的快捷方式
<img src="../images/截图/timg.jpg" alt="" name="pic">
<form action="" name="register">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码不少于8位">
<button>提交</button>
</form>
<p><a href="http://www.php.cn" name="php">php中文网</a></p>
<script>
// 以文档对象的方式来访问这些特定的元素集合
// document.images:获取所有的img元素，返回是一个数组
document.images[0].style.width = '100px'; //1.标签的数字索引访问
document.images['pic'].style.width = '200px'; //2.使用name属性值获取元素
// 如果把images看成对象，name就可以看成属性
document.images.pic.style.width = '300px'; //3.name作为images对象的属性
//forms属性：获取到页面中的所有form
// 1.索引
// 2.name属性值
// 3.name作为form表单的对象属性
// 4.使用元素集合item（）方法
document.forms[0].style.backgroundColor = 'lightgreen';
document.forms['register'].style.backgroundColor = 'red';
document.forms.register.style.backgroundColor = 'lightblue';
document.forms.item(0).style.backgroundColor = 'lightgreen';
// links 链接A
document.links[0].style.backgroundColor = 'yellow';
document.links['php'].style.backgroundColor = 'red';
document.links.php.style.backgroundColor = 'yellow';
// 获取body
document.body.style.backgroundColor = 'lightblue';
// 获取head
// 插入了一条空的style标签
let style = document.createElement('style'); //createElement通过指定名称创建一个元素
document.head.appendChild(style);
// documentElement获取html
console.log(document.documentElement);
// doctype获取文档类型
console.log(document.doctype);
</script>5.通过class属性来获取元素
<ul class="ul">
<li class="red">列表项01</li>
<li>列表项02</li>
<li class="green">列表项03</li>
<li>列表项04</li>
<li class="coral large">列表项05</li>
</ul>
<script>
// 根据class来获取元素
let red = document.getElementsByClassName('red')[0];
red.style.backgroundColor = 'red';
// 该方法不仅可以在document对象上调用，也可以在元素上调用，一般是在父元素上调用
let ul = document.getElementsByClassName('ul')[0];
let green = ul.getElementsByClassName('green').item(0);
green.style.backgroundColor ='green';
// class支持多值
let large = document.getElementsByClassName('coral large')[0];
large.style.backgroundColor = 'red';
</script> 6.通过css选择器来获取元素
<ul id="ul">
<li class="red">列表项1</li>
<li class="green">列表项2</li>
<li>列表项3</li>
<li class="green">列表项4</li>
<li class="cpral large">列表项5</li>
</ul>
<script>
// 选择页面元素最简单的方式就是用css选择器
// querySelectorAll返回一个元素的集合
let lists = document.querySelectorAll('li'); //根据标签选择器li来获取
console.log(lists);
// 该方法也可以在元素上调用
// querySelector 返回满足条件的一个
// querySelectorAll 返回满足条件的集合
let ul = document.querySelector('#ul');
let li = ul.querySelectorAll('.green');
for(let i=0;i<li.length;i++){
// 有两个green，所以需要循环出来
li[i].style.backgroundColor = 'green';
}
</script>---------------------------------------------------------------------------------------------------------------------------------
DOM操作元素的技巧
1、如何通过DOM方法来遍历文档树
//文档中所有内容都是节点类型
// 节点有文档节点document，元素节点element，text文本节点
// 每个节点对象还有三个最常用的属性：nodetype节点类型，nodename节点名称，nodevalue节点的值
console.log(document.nodeType); console.log(document.nodeName); console.log(document.nodeValue);
//childNodes 获取父节点下的所有子节点
//children 获只取元素子节点
console.log(document.childNodes[1].childNodes[2]); // 为了避免文本节点的干扰，js还提供了一套api，仅获取子元素节点（忽略空格） console.log(document.children[0].children[1]);
实例：
let ul = document.children[0].children[1].children[0]; ul.firstElementChild.style.backgroundColor = 'green'; //获取ul下的第一个子元素 ul.lastElementChild.style.backgroundColor = 'red'; //获取ul下的最后一个子元素 console.log(ul.childElementCount); //获取ul下的子元素的数量 console.log(ul.children.length); //获取ul下的子元素的数量
let li1 = ul.children[2]; console.log(li1);
li1.nextElementSibling.style.backgroundColor = 'yellow'; //获取下一个兄弟元素，同级的 li1.previousElementSibling.style.backgroundColor = 'cyan'; //获取上一个兄弟元素，同本同级的 li1.parentElement.style.background = 'wheat'; //获取父元素
li1.parentNode.style.backgroundColor = 'red';
2、如何操纵HTML元素的属性？
html元素属性有二类：1.标签自带的原生属性；2.用户自定义的属性
<img src="../images/截图/timg.jpg" alt="" width="320"> <h3 id="header" class="hello" style="color:red" title="当情妇来敲门" index="我是图片">《当情妇来敲门》：别走，情妇终究会到来</h3>
（1）原生属性：看作当前元素对象的属性，进行读写
let img = document.getElementsByTagName('img')[0];
img.src = '../images/12.png';// 更新属性
img.width = '400';
// class属性，因为class与js关键字冲突，用classname来表示
let h3 = document.getElementById('header');
console.log(h3.className);
// style属性，它的值不是一个字符串，而是一个对象
h3.style.color = 'green';（2）自定义属性：（以下四种方法均动态修改属性，并没有影响原生属性的值，除了可以修改自定义属性外也能修改原生属性的值）
hasAttribute 验真指定属性是否存在
getAttribute 返回指定属性的值
setAttribute 添加属性并为其赋值
removeAttribute 移出指定属性
if(h3.hasAttribute('index')){
console.log(h3.getAttribute('index')); //查看index属性
h3.setAttribute('index1','我是一张图片'); //添加index1属性
h3.removeAttribute('index1'); //移除index1属性
}（3）如何处理HTML元素中的内容
元素的内容主要分两类:
1.纯文本
2.html代码
<p>我正在学习javascript编程技术</p> <p>我正在学习<strong style="color:red;">javascript</strong>编程技术</p>
innerhtml：将元素内容全部读出，包括html代码
let p1 = document.getElementsByTagName('p')[0];
let p2 = document.getElementsByTagName('p').item(1);
console.log(p1.innerHTML);
console.log(p2.innerHTML);console.log(p1.textContent); console.log(p2.textContent);
if(p1.childNodes[0].nodeType === 3){
console.log(p1.childNodes[0].nodeValue);
}（4）DOM节点的创建/插入/删除/更新操作
let ul = document.createElement('ul');
// 2.将新元素添加到页面中，要在父元素上调用
document.body.appendChild(ul);
// 3.在ul中添加子元素
ul.innerHTML = '<li>我是列表项1</li>'appendchild（）默认是插入到父节点的尾部
let li = document.createElement('li');
li.innerHTML = '我是列表项2';
ul.appendChild(li); //默认是插入到父节点的尾部insertBefore（'新节点','插入的位置'）
let li1 = document.createElement('li');
li1.innerHTML = '我是列表项3';
// insertBefore('新节点','插入的位置')
ul.insertBefore(li1,li);inserbefore等价于appendchild
let li2 = document.createElement('li');
li2.innerHTML = '我是列表项4';
// ul.insertBefore(li2,null);
ul.appendChild(li2);ul.removeChild(li2);
let li3 = document.createElement('li');
li3.innerHTML = '我是新替换li的节点';
ul.replaceChild(li3,li);---------------------------------------------------------------------------------------------------------------------------------
DOM实战：
1、聊天信息生成原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>提交</title>
</head>
<body>
<input type="text" name="info">
<button>提交</button>
<ul></ul>
<script>
let input = document.getElementsByName('info')[0];
let button = document.getElementsByTagName('button')[0];
let ul = document.getElementsByTagName('ul')[0];
button.onclick = function(){
let li = document.createElement('li');
li.innerHTML = input.value;
ul.appendChild(li);
input.value = '';
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
