前端逼死强迫症之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>

4.提交表单

默认情况下：只有多行文本textarea、下拉框select 和input 标签可以数据提交到后台。

通过DOM任何标签都可提交表单。

<body>

    <form id="f1" action="http://www.cnblogs.com/lixiaoliuer/p/7155938.html">

        <input type="text" />

        <input type="submit" value="提交1" />

        <a onclick="submitForm();">提交2</a>

    </form>

    <script>

        function submitForm(){

            document.getElementById("f1").submit()

        }

    </script>

</body>

5.其他操作

console.log                // 输出框

alert                      // 弹出框

confirm                    // 确认框

// URL和刷新

location.href              // 获取当前URL

location.href = "url"      // 设置URL 重定向

location.reload()          // 重新加载，刷新

// 定时器

setInterval                // 多次定时器

clearInterval              // 清除多次定时器

setTimeout                 // 单次定时器

clearTimeout               // 清除单次定时器

<body>

    <form id="f1" action="http://www.oldboyedu.com">

        <input type="text" />

        <input type="submit" value="提交1" />

        <a onclick="submitForm();">提交2</a>

    </form>

    <script>

        function submitForm(){

            //document.getElementById('f1').submit()

            //alert(123);

            var v = confirm('真的要提交吗？');

            console.log(v);

            // v 鼠标点击确定、取消的返回值。

        }

        // 定时器，一直执行

        var obj = setInterval(function(){

            console.log(1);

            clearInterval(obj);  // 清除定时器

        }, 1000);

        // 定时器，只执行一次

        setTimeout(function () {

            console.log('timeout');

        },15000);

    </script>

</body>

浏览器console日志中，看运行输出信息

<body>

    <div id="status"></div>

    <input type="button" value="删除" onclick="DeleteEle();" />

    <script>

        function  DeleteEle(){

            document.getElementById('status').innerText = "已删除";

            setTimeout(function () {

                    document.getElementById('status').innerText = "";

            }, 3000);

        }

    </script>

</body>

删除显示信息，显示3秒后自动消失

三、事件

1.行为样式结果相分离的页面

实现表格，鼠标移上去后，变色

<body>

<table border="1" width="300px">

    <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>2</td></tr>

    <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>2</td></tr>

    <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>2</td></tr>

</table>

    <script>

        function t1(n){

            var myTrs = document.getElementsByTagName("tr")[n];

//            console.log(myTrs);

            myTrs.style.backgroundColor = "red";

        }

        function t2(n){

            var myTrs = document.getElementsByTagName("tr")[n];

            myTrs.style.backgroundColor = "";

        }

    </script>

</body>

优化后 —> 行为(js) 样式(css) 结构(html) 相分离

<body>

<table id="i1" border="1" width="300px">

    <tr><td>1</td><td>2</td><td>2</td></tr>

    <tr><td>1</td><td>2</td><td>2</td></tr>

    <tr><td>1</td><td>2</td><td>2</td></tr>

</table>

    <script>

        var myTrs = document.getElementsByTagName("tr");

        var len = myTrs.length;

        for(var i=0;i<len;i++){

            myTrs[i].onmouseover = function(){

                 // 谁调用这个函数，this指向谁

                 this.style.backgroundColor = "red";

            };

            myTrs[i].onmouseout = function(){

                this.style.backgroundColor = "";

            }

        }

    </script>

</body>

2.绑定事件的两种方式

a. 直接标签绑定 onclick=’xxx()’ onfocus
b. 先获取Dom对象，然后进行绑定

- document.getElementById(‘xx’).onclick
- document.getElementById(‘xx’).onfocus

a. 第一种绑定方式：直接标签绑定

<input id='i1' type='button' onclick='ClickOn(this)'>

function ClickOn(ths){

    // ths(形参) 当前点击的标签

}

b. 第二种绑定方式：先获取Dom对象，然后进行绑定

<input id='i1' type='button' >

document.getElementById('i1').onclick = function(){

    // this 代指当前点击的标签

}

注意this这里不要乱用，两种绑定方式不同，this传入的时候也是不同的

c. 第三种绑定方式：同时绑定多个事件

 <script>

        var mydiv = document.getElementById("i1");

        mydiv.addEventListener('click',function(){console.log('aaa'),false});

        mydiv.addEventListener('click',function(){console.log('bbb'),false});

    </script>

鼠标点击，同时执行以上两个，操作。第三个参数：默认就是false，false：冒泡模型；true：捕捉模型

3.作用域示例

var myTrs = document.getElementsByTagName("tr");

var len = myTrs.length;

for(var i=0;i<len;i++){

    // i=0,i=1,i=2

    myTrs[i].onmouseover = function(){

        this.style.backgroundColor = "red";

        // myTrs[i].style.backgroundColor = "red";

        // 为什么这里必须用this，不能用myTrs[i]？ 因为作用域不同，js是以函数作为作用域的

    };

}

巴特西

前端逼死强迫症之DOM

一、查找元素

1.直接查找

2.间接查找

二、操作标签

1.内容操作

2.样式操作

3.属性操作

4.提交表单

5.其他操作

三、事件

1.行为样式结果相分离的页面

2.绑定事件的两种方式

3.作用域示例

最新文章

热门文章

巴特西

前端逼死强迫症之DOM

一、查找元素

1.直接查找

2.间接查找

二、操作标签

1.内容操作

2.样式操作

3.属性操作

4.提交表单

5.其他操作

三、事件

1.行为 样式 结果相分离的页面

2.绑定事件的两种方式

3.作用域示例

最新文章

热门文章

1.行为样式结果相分离的页面