Bom
dom: document object model(文档对象模型),
是处理html、xml的标准编写接口。
节点和元素
整个页面也就是整个文档我们称之为文档节点;
文档节点使用document来表示;
页面中的所有标签我们称之为元素，使用element来表示;
如此处的文本、属性、注释等，我们称之为节点，使用node进行表示;即注释也叫注释节点、文 本也叫文本节点、属性也叫属性节点;元素也可以称为元素节点。
获取元素对象
/*
通过document 对象 获取元素
*/
//通过id获取元素对象 传入id的名称
//id不能重复
let div = document.getElementById('one');
console.log(div)
// 通过class名获取元素对象 返回的是一个数组
//如果要去操作具体的对象，需要通过索引获取到对象
let div2 = document.getElementsByClassName('box1');
console.log(div2)
//通过标签的名称获取元素对象 返回一个数组
let liList= document.getElementsByTagName('li');
console.log(liList)
//通过name属性的值获取元素 返回一个数组 （了解）
let nameList = document.getElementsByName('dzh');
console.log(nameList)
//通过选择器获取一个元素对象
let box1 = document.querySelector('.box1');
console.log(box1)
//通过选择器获取多个元素对象
var box2= document.querySelectorAll('div');
console.log(box2)操作文本超文本
// 通过class名获取元素对象 返回的是一个数组
//如果要去操作具体的对象，需要通过索引获取到对象
let div = document.getElementsByClassName('box1');
console.log(div)
console.log(div[0].innerText)
//操作元素的文本内容
// div[0].innerText=' <span>我是span</span>';
//操作元素的 超文本内容
div[0].innerHTML='<span class="one">我是span</span>'操作对象的属性
id和class
//操作元素对象的属性
// 对象名.属性名
console.log(div.id)
div.id='two';
//操作类名
console.log(div.className)
//覆盖class名
// div.className='box2'
// 添加类名
div.classList.add('box2')
// 删除类名
// div.classList.remove('')
//替换类名
// div.classList.replace('')操作自定义属性
//获取到所有的li 给每一个li添加一个唯一的index标识
let liList= document.getElementsByTagName('li');
for (let i = 0; i < liList.length; i++) {
const element = liList[i];
// 设置属性名和属性值
element.setAttribute('index',i)
console.log(element.getAttribute('index'))
}
操作元素行内样式
//设置当前元素的行内样式
div.style.color='red';
div.style.width='100px';
div.style.height='100px'// font-size fontSize background-color backgroundColor
div.style.backgroundColor='green';
获取元素的外部样式
//获取元素的外部样式
console.log(window.getComputedStyle(div).backgroundColor)
console.log(window.getComputedStyle(div).width)
操作checkbox的checked属性
//先判断 有没有选中
if(checkbox.checked){
//如果是选中 就取消选中
checkbox.checked=false;
btn.innerText='点击选中'
}else{
checkbox.checked=true;
btn.innerText='点击取消选中'
}节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="del()">删除</button>
<button onclick="replace()">替换</button>
</body>
<script>
// 创建一个元素节点 传入元素的名称
let div = document.createElement('div');
div.style.width='100px'
div.style.height='100px'
div.style.backgroundColor='red'
//创建文本节点， 等同于 innerText属性
// let text = document.createTextNode('我是div');
// div.appendChild(text)
div.innerText='我是div'
console.log(div)
//获取到body标签的对象
let body = document.querySelector('body');
console.log(body)
//追加子节点
body.appendChild(div)
function del(){
//点击按钮 删除div节点
//前提需要有这个节点，否则会报错
body.removeChild(div)
}
function replace(){
//点击按钮 将原来的div节点 替换成 span节点
let span= document.createElement('span');
span.style.color='pink';
span.style.fontSize='25px'
span.innerText='我是span'
//(插入的节点，被替换的节点)
//要保证 被替换节点存在
body.replaceChild(span,div)
}
//查看当前元素的所有子节点
let childList = body.childNodes
console.log(childList)
</script>
</html>