js之DOM

四方显神 / 2024-03-04 / 原文

1.DOM (Document Object Model)文档对象模型

js中对象的分类有三种：

用户定义对象
内建对象 Array Date Math等
宿主对象(由浏览器创建的对象)

model map

可以将DOM看成一棵“树”。DOM 把文档看做一棵家谱树，parent、child、sibling等。

2.DOM中的节点

元素节点 element node

文本节点 text node 没有内容的文档没有任何价值，而大多数内容都是由文本提供

属性节点 attribute node 比如<p title='xxx' id='xx'> 这里的title什么的

2.1获取元素节点的方式

document.getElementById() 单个对象,最后结果是个Object
document.getElementsByTagName 多个对象,最后结果是个HTMLCollection,集合,有点像数组push
document.getElementsByClassName 过个对象,最后结果是个HTMLCollection,集合

    <ul id="classlist">
        <li class="item">js</li>
        <li class="item">css</li>
        <li>DOM</li>
    </ul>
    <script>
        // 1.document.getElementById() 单个对象,最后结果是个Object
        var eleNode = document.getElementById('classlist') // 获取出来是个对象哦,object
        // 2.document.getElementsByTagName 多个对象,最后结果是个HTMLCollection,集合,有点像数组push
        var objList = document.getElementsByTagName('ul')
        // 3.document.getElementsByClassName 过个对象,最后结果是个HTMLCollection,集合
        var oItems = document.getElementsByClassName('item')
    </script>

2.2 setAttribute()和getAttribute()方法

<head>
/// .......
    <style type="text/css">
        #box{
            color: red;
        }
    </style>
</head>

<body>
    <p tilt="未设置的"> 嗨嗨嗨 </p>
    <script>
        var oP = document.getElementsByTagName('p')[0];
        // 获取属性值xx.getAttribute,有一个必须的参数，这个节点对象的名字
        var title = oP.getAttribute('title');
        // 设置属性值xx.setAttribute(name,value),两个参数
        oP.setAttribute('id','box')
        // 注意：DOM工作方法：先静态加载文档的内容,再动态刷新DOM,动态刷新不会影响静态内容,加了这个id,也看不出来加了
        cosole.log(title)

    </script>
</body>

2.3 节点对象的单个重要属性介绍

nodeName 节点名称

nodeValue 节点的值

nodeType 节点的类型

nodeName属性：节点的名称，是只读

元素节点的nodeName与标签名相同
属性节点的nodeName与属性的名称相同
文本节点的nodeName永远是#text
文档节点的nodeValue永远是#document

nodeValue属性：节点的值

元素节点的nodeValue是undefined或null
属性节点的nodeValue是属性的值
文本节点的nodeValue是文本自身

nodeType属性：节点的类型，是只读的(以下是几个常用的)

元素：节点类型是1
属性：2
文本：3
注释：8
文档：9

2.4 节点对象的常用属性

2.5 节点基本属性在各浏览器兼容性处理

2.6元素节点对象的增删改查方法

动态操作节点

创建节点 createElement()

插入节点 appendChild() insertBefore(newNode,node)

删除节点 removeChild()

替换节点 replaceChild(newNode,node)

创建文本节点 createTextNode()

3.样式设置

方法1（不推荐）：

<body>
    <p id="box">llll</p>

    <script type="text/javascript">
        var para = document.getElementById("box");
        console.log(para.style)
        para.style.color = 'white';
        para.style.backgroundColor = 'red';
        para.style.width='200px'
    </script>
</body>

方法2：通过控制属性类名控制样式

<head>
    <meta charset="utf-8">
    <title>动态操作样式</title>
    <style type="text/css">
        .highlight{
            background-color: red;
            color: white;
            width: 250px;
            height: 250px;
            text-align: center;
            font-size: 30px;
        }

    </style>
</head>
<body>
    <p id="box">llll</p>

    <script type="text/javascript">
        var para = document.getElementById("box");
        para.setAttribute("class","highlight")
    </script>
</body>