JavaScript HTML DOM 对象（下）

最新推荐文章于 2023-12-23 00:22:28 发布

凌_风

最新推荐文章于 2023-12-23 00:22:28 发布

阅读量1.4k

点赞数

分类专栏： WEB前端文章标签： javascript html 对象 dom 标签

本文链接：https://blog.csdn.net/fgf00/article/details/53402114

版权

WEB前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

DOM：document operation model 文档操作模型

每个标签都是一个对象。

一、查找元素

DOM 回顾

        直接查找
            var obj = document.getElementById('i1')
        间接查找
            文件内容操作：
                innerText    仅文本
                innerHTML    全内容

                obj1.value
                    input    value获取当前标签中的值
                    select   获取选中的value值
                        .selectedIndex
                    textarea value获取当前标签中的值

搜索框的示例

<body>
    <div style="width: 600px;margin: 0 auto;">
        <!--不使用onclick监听，使用onfocus监听焦点，tab键操作也能监听-->
        <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>
        <!--功能下面这句已经封装好了，不过老版本浏览器的不支持。-->
        <input type="text" placeholder="请输入关键字" />
    </div>

    <script>
        // 焦点移入，清空值
        function Focus(){
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val == "请输入关键字"){
                tag.value = "";
            }
        }
        // 焦点移出，添加值
        function Blur(){
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.length ==0){
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>

二、元素操作

1、样式操作

样式操作：

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

更细力度设置样式

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

2、属性操作

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>

3、提交表单

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

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

<body>
    <form id="f1" action="http://blog.csdn.net/fgf00">
        <input type="text" />
        <input type="submit" value="提交1" />
        <a onclick="submitForm();">提交2</a>
    </form>
    <script>
        function submitForm(){
            document.getElementById("f1").submit()
        }
    </script>
</body>

4、其他操作

console.log                // 输出框
alert                      // 弹出框
confirm                    // 确认框
// URL和刷新
location.href              // 获取当前URL
location.href = "url"      // 设置URL 重定向
location.reload()          // 重新加载，刷新
// 定时器
setInterval                // 多次定时器
clearInterval              // 清除多次定时器
setTimeout                 // 单次定时器
clearTimeout               // 清除单次定时器

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

<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>

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

<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>

三、事件

onclick，onblur，onfocus

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. 直接标签绑定 οnclick=’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是以函数作为作用域的
    };
}

转载请务必保留此出处：http://blog.csdn.net/fgf00/article/details/53402114

关于css、js，可以搜索“CSS参考手册”、“W3cschool手册”、“JavaScript 中CSS属性对照表”

Sublime Text 工具使用介绍：

emmet插件

生成html结构

输入感叹号”!”，之后按tab建

快速生成表格，3行3列

table>tr*3>td*3    # 输入后，按tab键
table.test#test>tr*3>td*3 # 按tab，生成class="test" id="test"
table>tr*3>td*3>{fgf}  # 往td里面写内容
table>tr*3>td*3>{fgf$}  # fgf1、fgf1、fgf3

其他快捷操作

html:5
html:4s

可以搜索其他emmet插件使用方法

凌_风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript HTML DOM 对象（下）

DOM：document operation model 文档操作模型每个标签都是一个对象。一、查找元素DOM 回顾直接查找 var obj = document.getElementById('i1') 间接查找文件内容操作： innerText 仅文本
复制链接

扫一扫