当前位置：首页 > news >正文

JavaWeb—js（3）

news 2025/7/28 6:04:28

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.childNodesconsole.log(childList)
</script>
</html>