前端逼死强迫症之DOM

Dom：document。相当于把所有的html文件，转换成了文档对象。

之前说过：html-裸体的人；css-穿上衣服；js-让人动起来。
让人动起来，就得先找到他，再修改它内容或属性。

找到标签
操作标签
事件

一、查找元素

1.直接查找

document.getElementById('i1')           根据ID获取一个元素
document.getElementsByTagName('div')    根据标签名获取标签集合
document.getElementsByClassName('div')  获取class多个元素(列表)
document.getElementsByName              获取name多个元素(列表)

2.间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

二、操作标签

1.内容操作

标签.innerText        获取标签中的文本内容
标签.innerText = ""   对标签内部文本进行重新复制
outerText
innerHTML             HTML内容
innerHTML  
value                 值

2.样式操作

className
    tag.className='c1'            直接整体做操作
    tag.classList.add('c2')       添加指定样式
    tag.classList.remove('c2')    删除指定样式

PS：onclick点击操作
    <div onclick='func();'>点我</div>
    <script>
        function func(){
        }
    </script>

className   // 样式，返回字符串
classList   // 样式，返回数组
classList.add()     // 添加样式
classList.remove()  // 移出样式

更细力度设置样式

 obj.style.fontSize = '16px';    
 obj.style.backgroundColor = 'red';
 obj.style.color = "red"

3.属性操作

setAttribute(key,value)   // 设置标签属性
removeAttribute(key)      // 移除标签属性
attributes                // 获取所有标签属性
getAttribute(key)         // 获取指定标签属性

创建标签，并添加到HTML中：

a. 字符串形式
b. 对象的方式
document.createElement(‘div’)

<body>
    <input type="button" onclick="AddEle1();" value="+" />
    <input type="button" onclick="AddEle2();" value="+" />
    <div id="i1">
        <p><input type="text" /></p>
    </div>
    <script>
        // 第一种添加方式：字符串形式
        function AddEle1(){
            // 创建一个标签
            // 将标签添加到i1里面
            var tag = "<p><input type='text'/></p>";
            // 注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
        // 第二种添加方式：对象的方式
        function AddEle2(){
            // 创建一个标签
            // 将标签添加到i1里面
            var tag = document.createElement('input');
            tag.setAttribute('type', 'text');
            tag.style.fontSize = '16px';
            tag.style.color = 'red';

            var p = document.createElement('p');
            p.appendChild(tag);
            document.getElementById('i1').appendChild(p);
        }
    </script>
</body>

View Code