DOM 学习笔记_js 移动端可以用document吗-CSDN博客

本文链接：https://blog.csdn.net/erdongmudong/article/details/126319941

DOM

了解一下dom
因为js是用来和用户进行交互的
而交互的结果一般要展示到网页
W3C提供了DOM的应用程序编程接口可以让js操作html和css了
把html所有的标签都当做一个对象来处理
js可以操作对象的属性和方法
DOM封装的各种函数方法让我们可以通过js来修改页面效果
1、获取网页中的所有标签对象
2、可以修改每个标签的属性
3、新增标签属性
4、删除标签
CRUD 增删改查
W3C组织给我们提供了一套应用程序编程接口
像调用内置对象一样去调用关于浏览器的API接口即可
WEB API

DOM 文档（document）对象模型
文档指的是网页这个文件document
把网页里的所有的标签元素都当成对象去使用
DOM封装了各种函数功能，能改变标签元素的属性、属性值、样式等

元素每一个标签都是元素element
节点网页里所有的东西都看做一个节点,包括换行
节点获取对象和getElement、querySelecor获取对象经常混合
使用节点获取对象比较方便

把这个网页当成一个对象来用js操作
网页中所有的标签元素也都当做一对象
var document = {
    body:{},
    head:{},
    getElementById:function(){
        方法功能是根据id获取一个document里对象
    }
    
}  
document对象是直接帮我们初始化好的
每个标签都是一个对象
节点：
document也是一个节点
每个标签也是一个标签节点、标签属性也是一个节点是属性节点、网页中的文本内容包		 括换行都是一个文本节点

节点

<body>
    <div id="baidu">百度</div>
    <div id="taobao">淘宝</div>
    <div id="pxx">拼夕夕</div>
    <script>
        //console.log(document);//获取文档节点
        //console.log(document.documentElement);//获取根节点，html
        //console.log(document.body);//获取body节点
        document.titile = "DOM-节点"

        var baidu = document.getElementById('baidu')
        //1.向上遍历，获取父节点
        //console.log(baidu.parentElement);//main
        //console.log(baidu.parentElement.parentElement);//body

        //2.向下遍历，获取子元素
            // firstChild
            // lastChild
            // childNodes(所有的子节点)
            // 获取节点；包括文本节点、换行也是一个文本节点

            // firstElementChild
            // lastElementChild
            // children(所有的子标签节点)
            // 获取第一个元素节点：只会获取元素
            // 代替length 的 childElementCount

        //3.同级遍历，获取同胞节点
        //console.log(baidu.previousElementSibling);//上一个相邻的同胞标签节点
        //console.log(baidu.nextElementSibling);//下一个相邻的同胞标签节点
        //nextSibling 下一个子节点   previousSibling  上一个子节点


        /* 
     节点有三个常用属性：

                nodeName      nodeType       nodeValue
    document    #document         9              null
    标签节点     大写的标签名       1              null  
    属性节点      属性名            2             属性值
    注释节点      #comment         8              注释的内容
    文本节点     #text             3             文本内容
     */

    
    //元素节点方法
    //1.添加元素
    //创建新的元素
    var div = document.createElement('div')
    div.innerHTML = '哈哈'
    console.log(div);
    //2.插入节点
    //2.1 appendChild 想某个节点里面的末尾添加新节点
    baidu.appendChild(div);


    //2.2在某个子节点的前面插入新的节点
    //参数1.新节点  2在哪个节点之前
    var p = document.createElement('p')
    p.innerHTML = '你好'
    console.log(div);
    var body = document.body
    var pxx = document.getElementById('pxx')
    body.insertBefore(p,pxx)

    //3.删除节点，移除某个子节点
        //removeChild

    //4.替换子节点
    //参数 1.新节点 2在替换那个节点‘被替换的节点’
        //replaceChild

    //四 属性节点方法
    //1.属性节点的 增删改查 通过元素.属性 方法操作
    console.log(baidu.id);//查看，已存在的
    baidu.className = 'box'; //添加，未存在的属性赋值
    baidu.className = 'box1';//修改，已经存在的元素赋值
    baidu.className = '';// 删除，只能删除值

    //方法2：通过Attribute
    //添加， 参数1：属性， 参数2：属性值
    baidu.setAttribute('title','我是标题')
    
    console.log(baidu.getAttribute('title'));//获取讴歌属性值

    baidu.setAttribute('title','我是百度')//修改

    //判断元素是否具有指定的html属性 hasAttribute
    console.log(baidu.hasAttribute('class'));
    //判断元素是否具有属性，任何一个都可以 hasAttributes
    console.log(baidu.hasAttributes());
    var p = document.querySelector('p')
    console.log(p.hasAttributes());
    
    //删除html属性 removeAttribute
    baidu.removeAttribute('class');

    //返回namenodemap 获得html属性
    console.log(baidu.attributes);

    //添加自定义属性
    baidu.setAttribute('data-a','百度')
    console.log();

    //class的操作
    //1.添加类名，保留原来的类名
    baidu.className = 'b1'
    baidu.className = 'b2'
    baidu.classList.add('b3')

    //移除类名
    baidu.classList.remove('b2')

    //判断class值是否包含b1
    console.log(baidu.classList.contains('b1'));

    //class 中如果包含参数则删除，如果没有参数则添加
    baidu.classList.toggle('b1');//没有，添加
    //baidu.classList.toggle('b1');//有，删除

    console.log(baidu.classList);//获取类名列表
    console.log(baidu.classList.length);//获取类名列表的长度
    console.log(baidu.classList.item(1));//

    </script>
</body>