DOM操作文本以及操作属性/JS三

操作文档树  document 写法window.document
获取节点：document.getElementById()
          var mydiv=document.getElementById('dv')
获取完之后操作：mydiv.style.width='200px'

var  mydiv=document.getElementsByClassName('dv')//返回的是数组
获取之后的操作mydiv[0].

学习思路：

1.文本操作
2.JS实现样式操作
3.如何操作属性
4.创建节点
5.插入节点
6.删除节点
7.事件讲解

 

操作文本

代码如下：

<div class="dv">
    scope
    n. 范围; 余地; 视野; 眼界; vt. 审视
    scopes
    n. 范围，领域; 见识; 机会（scope的复数形式）; v. 瞧; 审视（scope的第三人称单...
    scope creep
    范围蔓延
    scope of application
    适用范围
    scope of knowledge
    知识面
    scope
    例句
    scope
    百科
</div>
<script>
    var btn=document.querySelector('.btn')
    var div=document.querySelector('.dv')
    /*
    1.点击按钮 按钮身上绑定事件
    2.替换iv的文本内容  对象.innerText
    */

    /*触发才执行，所以叫回调函数*/
    btn.onclick=function () {
        // div.innerText='哈哈哈呼呼呼'/*.inner设置文本内容*/
        div.innerHTML='<a href="http://www.baidu.com">百度</a>'//innerHtml可以写Html的东西
    }
</script>

操作属性

属性

默认属性
获取：对象.属性  对象['属性名']
var obj={
    name:'lili'
    1.'rl'
}
obj.name        //不能取出数字为键的如obj.1不能取出
obj['name']     //最好用这种方法拿数据

自定义属性
var btn=document.querySelector('button')
上面太麻烦用下面的封装函数
function getElement(selector) {
    return document.querySelector(selector)
}

代码如下：

 var btn =  my$('#btn');
   var mya = my$('a') ;
   /*1:点击按钮*/
   btn.onclick = function () {
       /*修改链接和热点文字*/
       mya.innerText = '火狐'
       mya.href = 'https://home.firefoxchina.cn/'
   }

结果如下：

 

点击按钮

点击火狐后