js对dom元素的操作

Original 2019-01-18 21:06:58 239
abstract:通过js提供的一些对于html中css的操作的方法,可以实现对页面的选择和操作。常用的操作方法,增加div,或者是对div进行改样式,验证,等等。很方便的操作用TagName来获取元素:<body><ul><li>1</li><li>2</li><li>3</li><li>4</li&

通过js提供的一些对于html中css的操作的方法,可以实现对页面的选择和操作。常用的操作方法,增加div,或者是对div进行改样式,验证,等等。很方便的操作

用TagName来获取元素:

<body>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

</body>

<script>

window.onload=function(){

let UL=document.getElementsByTagName('ul')[0]

console.log(UL)


QQ截图20190118210210.jpg

用TagName选取单个li

<body>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

</body>

<script>

window.onload=function(){

let UL=document.getElementsByTagName('ul')[0]

//    console.log(UL)


let lis=document.getElementsByTagName('li')

console.log(lis[1])

}


</script>

2.jpg


js控制ul背景颜色:

<!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>Document</title>

<style>

ul{width: 300px;}

</style>

</head>

<body>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

</body>

<script>

window.onload=function(){

let UL=document.getElementsByTagName('ul')[0]

//    console.log(UL)


let lis=document.getElementsByTagName('li')

// console.log(lis[1])

UL.style.backgroundColor='red'

}


</script>

</html>

3.jpg

Correcting teacher:天蓬老师Correction time:2019-01-19 09:09:17
Teacher's summary:let UL=document.getElementsByTagName('ul')[0] 变量量不推荐全用大写字母

Release Notes

Popular Entries