DOM（1）——学习前端

玄东林檎

已于 2022-08-19 11:39:25 修改

阅读量250

点赞数 1

分类专栏：学习前端文章标签：前端学习 javascript

于 2022-08-19 11:38:33 首次发布

本文链接：https://blog.csdn.net/u013430418/article/details/126421548

版权

学习前端专栏收录该内容

33 篇文章 10 订阅

订阅专栏

JavaScript DOM

HTML DOM 树模型

HTML DOM 树模型

DOM节点

根据W3C的HTML DOM标准，HTML中所有的的内容都是节点

			1、整个文档是一个文档节点
            2、每个HTML元素是元素节点
            3、HTML元素内的文本是文本节点 
            4、每一个HTML属性是属性节点
            5、注释是注释节点

通过HTML DOM，树中所有的节点均可通过JavaScript进行访问。所有HTML元素（节点）均可被修改，也可以创建或删除节点

以不同的方式来访问 HTML 元素：

			通过使用 getElementById() 方法
            通过使用 getElementsByTagName() 方法
            通过使用H5新增 getElementsByClassName() 方法
            通过使用H5新增的方法document.querySelectorAll()
            通过使用H5新增的方法document.querySelector()

 let str = "恩奇都"
        //  访问HTML元素节点    通过使用 getElementById() 方法
        let main = document.getElementById('main')
        main.innerHTML = str;
        console.log(main);//输出的是字符串
        //  通过使用 getElementsByTagName() 方法
        let input = document.getElementsByTagName('input');
        console.log(input);//输出的是伪数组
        // 通过使用H5新增 getElementsByClassName() 方法
        let ul = document.getElementsByClassName('list')[0]
        console.log(ul);
        //  通过使用H5新增的方法document.querySelectorAll()
        let li = document.querySelectorAll('li')
        console.log(li);
        var person = [
            { id: '001', name: '张三', age: 18 },
            { id: '002', name: '李四', age: 19 },
            { id: '003', name: '王二麻子', age: 20 },
            { id: '003', name: '赵六', age: 20 },
        ];
        let htmlStr = ''
        person.forEach(p => {
            htmlStr += `<li>${p.id} - ${p.name} - ${p.age}</li>`
        });
        let list = document.querySelector('.list');
        list.innerHTML = htmlStr;

在这里插入图片描述

特殊节点的获取

			·获取body元素
                document.body
            ·获取html元素   
                document.documentElement

改变/获取节点的内容

			· innerText 不能识别html标签
            · innerHTML 能识别html标签
            · value表单

改变/获取节点的属性值

			· href
            · src
            · title
            · alt

表单元素的属性操作

			· type
            · value
            · checked
            · selected
            · disabled (表单被禁用true)

修改节点样式属性

			· element.style 行内样式
            · elenment.className 类名样式
            · ie10 及以上 document.getElementsByClassName('t1').classList.add('t2')
            · 全兼容 document.getElementsByClassName('t1')[0].className='t2'
            · ie8 及以上 document.getElementsByClassName('t1')[0].setAttribute('class','t2')

创建和删除节点

			1、创建节点
            2、添加节点
            3、删除节点


<body>
    <main id="main"></main>
    <div id="div"></div>
    <input type="text" name="shuru" value="34">
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>