Dom（文档对象模型、排他思想、属性的操作）

最新推荐文章于 2023-08-10 15:09:28 发布

陛下，再来一杯娃哈哈

最新推荐文章于 2023-08-10 15:09:28 发布

阅读量465

点赞数

文章标签：原型模式前端 javascript dom

本文链接：https://blog.csdn.net/m0_46420078/article/details/121434966

版权

一、DOM(上）

二、DOM(下)

一、DOM(上）

1、WebAPI:浏览器提供的一组操作浏览器功能和页面元素的接口

2、JavaScript的组成：

（1）ECMAScript:是Javascript的核心。定义了一套语法，Javascript实现了这些语法规范。

（2)DOM:文档对象模型

document.title = "WebAPI"
console.log(document.title)
document.write("<h2>西安邮电大学</h2>")

A.是W3C组织推出的指针HTML/XHTML语言的标准的编程接口

B.通过DOM接口可以对HTML的页面元素进行访问、设置

C.DOM树：html文档就是一棵树（文档模型树）

D.常用的概念：

文档（document):一个html页面就是一个文档

元素（element）：页面中的所有标签

节点（node）：页面中的所有内容都是节点（标签、标签的属性、标签里的文本、注释），在DOM中所有的节点都是对象，每个对象都有自己的属性和方法。

E.元素的获取：

a.通过id获取：document.getElementById('id')

<div id="box"></div>
<script>
    var d = document.getElementById('box')
    console.log(d)
</script>

b.根据标签名来获取：document.getElementsByTagName获取的是数组，该方法返回的是伪数组（不能使用Array中的方法）

<div id="box"></div>
<div id="b1"></div>
<div id="b2"></div>
<script>
    var divs = document.getElementsByTagName('div')
    console.log(divs)
    console.getElementsByTagName(Array.isArray(divs))
</script>

c.根据name属性来获取： document.getElementsByTagName()，该方法的返回值是数组

<input type="checkbox"name="hobby" value="游泳">游泳
<input type="checkbox"name="hobby" value="音乐">音乐
<input type="checkbox"name="hobby" value="足球">足球
<script>
    var hobbys = document.getElementsByName('hobby');
    console.log(hobbys)
    hobbys[0].checked = true;
</script>

d.根据标签的class属性获取：document.getElementsByClassName,该方法的返回值是数组

<p class="p1">邮电大学</p>
<p class="p1">政法大学</p>
<p class="p1">石油大学</p>
<script >
    var ps = document.getElementsByClassName('p1')
    console.log(ps)
</script>

F.HTML中新增的获取元素（标签）的方法：要考虑浏览器的兼容性

a.document.querySelector（）：可以根据标签的id、class 属性选择元素

b.document.querySelectorAll（）：选择所有元素

<body>
    <p class="p1">邮电大学</p>
    <p class="p1">政法大学</p>
    <p class="p1">石油大学</p>
    <div id="d1">交通大学</div>
    <ul>
        <li >西游记</li>
        <li>三国</li>
        <li>水浒</li>
    </ul>
    <script >
        // var ps = document.getElementsByClassName('p1')
        // console.log(ps)
        var qs = document.querySelector('.p1');//根据class属性值选取第一个元素
        console.log(qs)

        var dd = document.querySelector('#d1');//使用id选择器来选择元素
        console.log(dd)

        var li = document.querySelector('li');//通过标签名来选择第一个li元素
        console.log(li)
        var lis = document.querySelectorAll('li');//选择使用li标签
        console.log(lis)
    </script>
</body>

G.document对象的属性

a.title：页面的标题，即页面的title元素（标签）

b.body：页面的body元素（标签）

c.documentElement：页面的html元素（标签）

 console.log(document.documentElement)

d.forms：页面中的form元素（标签）

e.image：页面中的图像元素（标签）

H.事件：用户进行的某种操作（动作），这种动作能够被Javascript侦测到，采用‘触发-响应’机制进行处理。是实现页面交互的重要方式

a.事件源：触发事件的元素（谁触发了事件）

b.事件类型：触发了什么类型的事件

c.事件处理函数（事件响应函数）：事件被触发后做什么

<body>
    <button id="btn">单击按钮</button>
    <script>
        //获取按钮
        var btn = document.getElementById('btn');
        //给按钮注册事件及事件处理程序
        btn.onclick = function(){
            alert('你单击了按钮')
        }
    </script>
</body>

I.操作元素（标签）的内容

a.element.innerHTML:设置或返回元素开始和结束之间的HTML。包括标签、空格、换行

<body>
    <input type="text" id="userName">
    <button id="btn" onclick="f1()">单击按钮</button>
    <div id="dt"></div>
    <script>
        function f1(){
            //获取input中的value
            var name = document.getElementById('userName').value;
            //将input的值放入div中
            document.getElementById('dt').innerHTML = name;
        }

    </script>
</body>

b.interText：纯文本内容（去掉标签和格式）

c.textContent:去掉标签的纯文本内容

<body>
    <div id="box">
        西安邮电大学
        <p>
            西北政法大学
            <a href="https://www.baidu.com">去百度</a>
        </p>
    </div>
    <script>
        var box = document.getElementById('box');
        console.log("interHTML:", box.innerHTML);
        console.log("interText:",box.innerText);
        console.log("textContent:",box.textContent)
    </script>
</body>

J.操作元素的属性：

<body>
    <button id="flower">云朵</button>
    <button id="grass">星星</button>
    <br><br>
    <img src="../image/2.png" title="云朵" alt="">

    <script>
        //获取页面元素 
        var flower = document.getElementById('flower');
        var grass = document.getElementById('grass');
        var img = document.querySelector('img');
        //2注册事件 处理程序
        flower.onclick = function(){
            img.src = '../image/2.png'
            img.title= '云朵'
        }
        grass.onclick = function(){
            img.src = '../image/4.png'
            img.title = '星星'
        }
        img.onmouseover = function(){   //鼠标悬停
            img.src = '../image/2.png'
            img.title= '云朵'
        }
        img.onmouseout = function(){    //鼠标离开
            img.src = '../image/4.png'
            img.title = '星星'
        }
    </script>
</body>

K.操作元素的样式

a.操作style属性：样式大学.style.样式属性名

'样式属性名'对应CSS的属性名，在CSS中样式属性名的单词之间用'-'分隔；在Javascript中样式属性名采用驼峰命名法。

<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box')
        box.style.width = '100px';
        box.style.height = '100px';
        box.style.backgroundColor = 'red';
        box.style.transform = 'rotate(20deg)'
    </script>
</body>

b.操作className属性：元素对象：className属性

<style>
    div{
        width: 100px;
        height: 100px;
        background-color:pink;
    }
    .change{
        background-color: purple;
        color: #fff;
        font-size: 25px;
        margin-top: 100px;
    }
</style>
<body>
    <div class="first">西安邮电大学</div>
    <script>
        //获取元素
        var div = document.querySelector('div');
        //注册事件
        div.onclick = function(){
            this.className = 'change';
        }
    </script>
</body>

显示隐藏文本框内容：

<body>
    <div>
        <label for="">
            <input type="text" name="" id="userName" value="手机" style="color: #999;">
        </label>
    </div>
    <script>
         //获取元素：input
        var text = document.querySelector('input')
        //给元素注册一个获取焦点的事件：onfocus
        text.onfocus = function(){
            if(this.value === '手机'){
                this.value = '';
            }
            this.style.color = '#333';
        }
        //3.给元素注册 失去焦点的事件：unblur
        text.onblur = function(){
            if(this.value === ''){
                this.value = '手机'
            }
            this.style.color = '#999';
        }
    </script>
</body>

二、DOM(下)

1.排他思想：将所有元素的效果全部清除（包括自己），重新设置当前元素

<body>
    <div>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
    </div>
    <script>
        //1.获取所有按钮
        var btns = document.getElementsByTagName('button');
        //2.循环：给每一个按钮注册一个onclick事件
        for(var i=0;i<btns.length;i++){
            btns[i].onclick = function(){
                //循环排他：将所有按钮的背景色去掉
                for(var j=0;j<btns.length;j++){
                    btns[j].style.backgroundColor = '';
                }
                //设置当前按钮的背景色
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

（1）鼠标事件：

a.鼠标经过：mouseover

b.鼠标离开：mouseout

<style>
    .bg{
        background-color: red;
    }
</style>

//1.获取tbody下的所有tr
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        //2.给每个tr绑定事件
        for(var i=0;i<trs.length;i++){
            trs[i].onmouseover = function(){
                this.className = 'bg'
            }
            trs[i].onmouseout = function(){
                this.className = '';
            }
        }

2.属性的操作：

（1）获取属性值

a.对于元素的固有属性有两种方法：

元素名.固有属性

元素名.getAttribute（'固有属性'）

b.对于元素的非固有属性：

元素名.getAttribute（'固有属性'）

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        console.log("Id:",div.id)
        console.log("Id:",div.getAttribute('id'));

        console.log("Index",div.in);//index表示div的固有属性
        console.log("INdex",div.getAttribute('index'))
        console.log("Class:",div.class)
    </script>
</body>

(2)设置属性值

a.固有属性值：

element.属性名 = 值

element.setAttribute（'属性'，值）

b.非固有属性： element.setAttribute（'属性'，'值'）

<body>
    <div></div>
    <script>
        var div = document.querySelector('div')
        div.id = 'test';
        div.className = 'nav';
        div.setAttribute('index',1002)
    </script>
</body>

(3)移除属性值

<body>
    <div></div>
    <button>移除属性</button>
    <script>
        var div = document.querySelector('div')
        div.id = 'test';
        // div.className = 'nav';
        div.setAttribute('index',1002)
        div.setAttribute('class','nav')

        var btn = document.querySelector('button');
        btn.onclick = function(){
            div.removeAttribute('index')
        }
       
    </script>
</body>

3.H5中自定义属性

（1）自定义属性规范：data-属性名

（2）实现方式：

a.在html标签中自定义：data-属性名

<div>
       <p data-index="111"></p> <!--data是前缀,属性名是index-->
</div>

b.在JavaScript中定义：element.dataset.属性名 = ‘值 ’

（3）获取自定义属性值

a.element.dataset.属性名

b.element.dataset['属性名']

dataset:是一个集合，里面存放的是以data-开头的所有自定义属性。若自定义属性名中含义多个分隔符‘-’，在获取属性时，需要去掉‘-’，采用驼峰命名法

<body>
   <div>
       <p data-index="111" data-list-phone="1008611">西安邮电大学</p> <!--data是前缀,属性名是index-->
       <button>获取属性</button>
   </div>
   <script>
       var p = document.querySelector('p');
       p.dataset.class = "nav";
       p.setAttribute('data-name','孔明')

       var btn = document.querySelector('button');
       btn.onclick = function(){
           console.log("Name:",p.dataset.name);
           console.log("Index:",p.dataset['index']);
           console.log("Phone:",p.dataset.listPhone)//驼峰命名法
       }
   </script> 
</body>

陛下，再来一杯娃哈哈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Dom（文档对象模型、排他思想、属性的操作）

一、DOM:1、WebAPI:浏览器提供的一组操作浏览器功能和页面元素的接口2、JavaScript的组成：（1）ECMAScript:是Javascript的核心。定义了一套语法，Javascript实现了这些语法规范。（2)DOM:文档对象模型document.title = "WebAPI"console.log(document.title)document.write("<h2>西安邮电大学</h2>")A.是W3C组织推出的 ...
复制链接

扫一扫