Dom HTML
属性操作 ![](https://i-blog.csdnimg.cn/blog_migrate/8e823dfcc7db21c66c99f3159a7cbace.png)
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素/
获取 HTML 元素 (获取dom)★★★在属性操作前 一定要获取dom
// 通过标签名获取
var box = document.querySelector('div');
var box = document.querySelectorAll('div');// 通过类名
var box = document.querySelector('.box');
var boxs = document.querySelectorAll('.box');// 通过id名获取
var box = document.querySelector('#box');
var box = document.querySelectorAll('#box')
例子 更换图片 --属性操作-img的简写
<body>
<img class=img1 src="../images/1.webp">
<button οnclick=changeImg> 点击更换图片 </button>
<script>
//1.获取dom
var img=doucument.querySelector(".img1")
//2.给需要变换的图片设置一个 数组
arr_img=[
"../images/1.webp",
"../images/2.webp",
"../images/3.webp",
]
//3.写onclick事件函数 ---本例子中是 src属性的简写
function changeImg(){
img.src=arr_img[parseInt(Math.random()*3)]
}
</script>
</body>
效果
例子 更换背景图 ---属性操作---href的简写
<link rel="stylesheet" id="link" href="../css/css1.css">
<body>
<button οnclick="skin1()">背景1</button>
<button οnclick="skin2()">背景2</button>
<script>
var link = document.querySelector("#link")
function skin1(){
link.href=./css/css1.css
}
function skin2(){
link.href=./css/css2.css
}
</script>
</body>
效果 点击按钮,背景图改变
内容操作![](https://i-blog.csdnimg.cn/blog_migrate/bc8889d18a79b42900d65e33261d969c.png)
改变 HTML 输出流
document.write() 可用于直接向 HTML 输出流写内容。
改变 HTML 内容
dom.innerHTML=" <b> 加粗</b>" //新的HTML
例子 更改文字 --bom.innerHTML
<body>
<div class="box"><strong>hello world</strong></div>
<button οnclick="changeBoxInner()">改变box的文字</button>
<script>
var box=document.querySelector(".box")
function changeBoxInner(){
box.innerHTML="你好!世界!"
}
</script>
</body>
效果
=============》
随机点名 ===和更换图片很像
var name_list=[
"迪丽热巴",
"古力娜扎",
"赵露思",
"张天爱",
"kkr"
]
var box =document.querySelector(".box")
function nameRandom(){
var name1=name_list[parseInt(Math.random()*5)]
box.innerHTML=name1
}
行内样式操作
JavaScript HTML DOM - 改变CSS
如需改变 HTML 元素的样式
dom.style.属性名 = "属性值";
var box =doucument.querySelect(".box") //获取dom
function handlerClick(){ //事件
box.style.background="black"
}
DOM操作 错误排查方案 :
// DOM操作 错误排查方案 :
// - 有报错 :
// - 语法错误 : 改语法;
// - 引用错误 : 变量没有声明, 变量单词写错了
// - 类型错误 : 我们要根据报错反推, 找出错误结果 *
// - 没有报错 :
// - 函数是否执行;