javaScript中DOM的相关用法（DOM文档对象模型、document对象、获取html元素、操作元素内容、操作css样式、操作属性）

TOTO come on

已于 2022-08-27 15:48:58 修改

阅读量856

点赞数

文章标签： css html 前端 javascript

于 2022-08-27 11:02:41 首次发布

本文链接：https://blog.csdn.net/qq_56756602/article/details/126554450

版权

一、DOM文档对象模型

DOM（Document Object Model）：文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- ...
DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM：页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象

二、document对象

1.document对象属性

title 文档标题，即title标签内容

2.document对象方法

document.write()

输入文本到当前打开的文档

三、获取html元素

1.getElementById（'id名'）

返回唯一元素

  <body>
  <h2 id="title">DOM学习</h2>
    <div class="d1">元素一</div>
    <div class="d1">元素二</div>
    <div class="d2">元素三</div>

    <input type="text" name="username">
    <input type="text" name="password">


<script>

    //    获取id属性值为title的标签
        function test1(){
            var h2Ele=document.getElementById('title')
            console.log(h2Ele)
        }
        test1()
</script>

</body>

2.getElementsByClassName('class属性')

类数组（伪数组）

1.类数组不能使用Array的常用的方法

push pop

2.类数组可以遍历，可使用[]访问元素

<body>
     <h2 id="title">DOM学习</h2>
    <div class="d1">元素一</div>
    <div class="d1">元素二</div>
    <div class="d2">元素三</div>

    <input type="text" name="username">
    <input type="text" name="password">
<script>
 function test2(){
            var inputEle = document.querySelector('input[name="message"]')
            inputEle.value = 'jack'
            console.log( inputEle.value )
        }
        test2()

</script>
</body>

3.getElementsByTagName('标签名')

<body>
    <h2 id="title">DOM学习</h2>
    <div class="d1">元素一</div>
    <div class="d1">元素二</div>
    <div class="d2">元素三</div>

    <input type="text" name="username">
    <input type="text" name="password">

<script>
       function test3(){
            var divEles=document.getElementsByTagName('div')
            console.log(divEles)
        }
       test3()

</script>
</body>

4.grtElementsClassName('name属性')

5..querySelector（选择器名）和querySelectorAll

querySelector

只返回一个元素

querySelectorAll

返回所有元素存储在类数组里面

css选择器

1.基本选择器

id class 标签

2.层级选择器

子代选择器后代选择器

m>n m n

兄弟选择器

m~n m+n

3.伪类选择器

m n:nth-child(n)

4.属性选择器

input[name]

input[name='username']

<body>
    <h2 id="title">DOM学习</h2>
    <div class="d1">元素一</div>
    <div class="d1">元素二</div>
    <div class="d2">元素三</div>

    <input type="text" name="username">
    <input type="text" name="password">


<script>
 function test4(){
            var h2Ele=document.querySelector("#title")//获取第一个id名为title的元素
            console.log(h2Ele)
        }
        // test4()

        
        func

最低0.47元/天解锁文章