js Dom-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_57985616/article/details/130412337

Dom HTML

属性操作

通过 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>

效果点击按钮，背景图改变

内容操作

改变 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

}