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属性获取元素
实例
<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 获只取元素子节点
获取body
console.log(document.childNodes[1].childNodes[2]); // 为了避免文本节点的干扰,js还提供了一套api,仅获取子元素节点(忽略空格) console.log(document.children[0].children[1]);
实例:
获取ul
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下的子元素的数量
获取第三个li
let li1 = ul.children[2]; console.log(li1);
获取兄弟元素,父级元素
li1.nextElementSibling.style.backgroundColor = 'yellow'; //获取下一个兄弟元素,同级的 li1.previousElementSibling.style.backgroundColor = 'cyan'; //获取上一个兄弟元素,同本同级的 li1.parentElement.style.background = 'wheat'; //获取父元素
parentNode返回某节点的父节点,没有则返回null
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);
textContent仅获取纯文本
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>
运行实例 »
点击 "运行实例" 按钮查看在线实例