DOM

一、对象基础(补充)


<script type="text/javascript">
    //1.什么是对象(Object) - 和Python中的对象一样,有对象属性和对象方法。
    //2.创建对象
    /* a.创建对象字面量
     * 对象字面量: {属性名1:属性值1, 属性名2:属性值1}
     * 注意:当属性值是普通值我们叫这个属性为对象属性;当属性值是函数这个属性就是对象方法
     */
    p1 = {
            name:'小李', 
            age:10, 
            eat:function(){
            console.log('吃饭!')
            }
        }
    p2 = {
            name:'小明', 
            age:18, 
            eat:function(){
            console.log('吃饭!')
            }
        }
    
    /* b.通过构造方法创建对象
     * 声明构造方法(类似python声明类)
     * - 声明一个函数,使用函数名来作为类名,在函数中通过this关键字来添加对象属性和对象方法
     * - 构造方法的函数名,首字母大写
     * - this类似python中的self
     * 通过构造方法创建对象
     * - 对象 = new 构造方法()
     */
    function Person(name1='张三', age1=18, sex1='男'){
        //添加对象属性
        this.name = name1
        this.age = age1
        this.sex = sex1
        //添加对象方法
        this.eat = function(food){
            console.log(this.name+'在吃'+food)
        }
        //返回对象
        return this
    }
    
    //创建Person的对象
    p3 = new Person()
    p4 = new Person('小明')
    //使用对象属性和方法
    console.log(p3, p4, p3===p4, p3.age, p4.name)
    p4.eat('苹果')
    
    
    //调用函数,获取返回值
    win1 = Person()
    console.log(win1)
    win1.alert('我是window')
    
    // c.函数中this关键字
    /* 当调用函数的时候前面加关键字new,就是这个函数当成构造函数创建对象,函数中的this就是当前对象;
     * 直接调用函数的时候,函数中的this是window对象 
     */
    //3.使用对象属性(获取属性值)
    /*
     * a. 对象.属性  - p5.name
     * b. 对象[属性名]
     */
    var t = 'age'
    p5 = new Person('小花', 20, '女')
    console.log(p5.name)
    console.log(p5['name'], p5[t])
    p5.eat('面条')
    
    //4.修改对象属性的值
    /* 属性存在的时候是修改,不存在的时候就是添加
     * 对象.属性 = 值
     * 对象[属性名] = 值
     */
    //修改属性值
    p5.name = '小红'
    console.log(p5)
    p5['age'] = 30
    console.log(p5)
    
    //添加属性
    p5.num = '100222'
    p5['num2'] = '110222'
    console.log(p5)
    
    //给对象添加属性只作用于一个对象,不影响其他对象
    console.log(p4)
    
    //构造方法名(类名).prototype.属性 = 值  --- 给指定构造方法创建的所有的对象都添加指定的属性
    Person.prototype.aaa = '123'
    p6 = new Person()
    p6.aaa = 'abc'
    console.log(p6.aaa)
    
    console.log(p5.aaa)
    
    //给String类型添加方法
    String.prototype.ytIndex = function(x){
        return this[x]
    }
    str1 = new String('abcdef')
    console.log(str1.ytIndex(0))
    console.log('hello'.ytIndex(3))
    
    //练习:用一个数组保存多个学生对象,要求学生对象中有姓名,年龄和成绩。最后所有学生按成绩进行排序
    function Student(name, age, score){
        this.name = name;
        this.age = age;
        this.score = score;
        
        return this;
    }
    students = [new Student('小明', 18, 90), new Student('小红', 20, 78), new Student('小花', 19, 98)];
    //sort方法排序后,原数组会改变,也会产生新的数组
    newStudents = students.sort(function(a,b){
        return a.score - b.score;
    });
    console.log(newStudents, students)
    

    
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

二、DOM获取节点


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="p1" class="c1">我是段落1</p>
        <a href="" id="a1">百度一下</a>
        <a href="" class="c1">刷新</a>
        <input type="text" name="username"  value="" />
        <input type="password" name="username" value="" />
    </body>
</html>
<!--
    1.什么是DOM(文档对象模型)
    DOM是document object mode的缩写
    DOM模型就是一个树结构,里面是由各种节点组成
    
    2.document对象 - js写好的一个对象,代码的是网页内容结构
    通过document对象可以拿到网页中所有内容对应的节点
    
    3.获取节点(在js中获取网页中的标签)
-->
<script type="text/javascript">
    //============节点操作=============
    //1.直接获取节点
    //a.通过标签的id值来获取指定的标签
    /* document.getElementById(id值) - 返回节点对象
     * 如果html中同样的id对应的标签有多个,只能取一个。所有一般在使用id的时候id要唯一
     */
     var pNode = document.getElementById('p1')
     console.log(pNode)
     
     //b.通过标签名来获取指定的标签
     /* document.getElementsByTagName(标签名) - 返回的是一个数组对象,数组中是节点
      */
     var aNodeArray = document.getElementsByTagName('a')
     for(x in aNodeArray){
        // 拿到aNodeArray对象中的所有属性,这儿除了a标签以外还有length,item等其他非标签对象
        var aNode = aNodeArray[x]
        
        // 只对标签进行操作
        if(typeof(aNode) == 'object'){
            console.log(aNode, '是标签!')
        }
     }
     
     //c.通过类名来获取指定的标签
     /* document.getElementsByClassName(类名) - 获取所有class属性值是指定的值的标签,返回的是一个数组对象
      */
     var c1NodeArray = document.getElementsByClassName('c1')
     console.log(c1NodeArray)
     
     //d.通过name属性的值来获取指定的标签(了解) 
     /* document.getElementsByName('username') - 返回一个节点数组对象
      */
     console.log(document.getElementsByName('username'))
    
</script>

三、间接获取节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box1">
            box1
            <div id="box11">
                div11
            </div>
            <div id="box12">
                div12
            </div>
            <div id="box13">
                div13
            </div>
        </div>
        
    </body>
</html>
<script type="text/javascript">
    
    var box11Node = document.getElementById('box11');
    //1.获取父节点
    // 子节点.parentElement - 获取子节点对应的父节点
    var box1Node = box11Node.parentElement;
    var box1Node2 = box11Node.parentNode;
    console.log(box1Node, box1Node2);
    
    //2.获取子节点
    //a.获取所有的子节点
    //父节点.children - 返回一个数组对象
    var allChildArray = box1Node.children
    console.log(allChildArray)
    
    //父节点.childNodes - 获取父节点下所有的内容(包括子节点和文本)
    var allChildArray2 = box1Node.childNodes
    console.log(allChildArray2)
    
    //b.获取第一个子节点
    //父节点.firstElementChild
    var childNode = box1Node.firstElementChild
    console.log(childNode)
    //c.获取最后一个子节点
    var childNode2 = box1Node.lastElementChild
    console.log(childNode2)   
</script>

四、DOM节点的添加和删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                position: relative;
            }
            #div2{
                width: 200px;
                height: 200px;
                background-color: lightcyan;
                position: absolute;
                left: 30px;
            }
            #div2 #div21{
                width: 100px;
                height: 100px;
                background-color: sandybrown;
            }
        </style>
    </head>
    <body>
        <button onclick="addDiv()">添加</button>
        <p id="p1", class="cp1" style="color: darkseagreen;">我是段落</p>
        <div id="div1" style="height: 400px; background-color: lightgoldenrodyellow;">
            <div id="div11" style="height: 60px; width: 120px; background-color: yellowgreen;">
            </div>
        </div>
        
        <div id="div2">
            <div id="div21">
                
            </div>
            
        </div>
        
    </body>
</html>

<script type="text/javascript">
    var pNode = document.getElementById('p1');
    //获取标签内容
    var content = pNode.innerHTML;
    //修改标签内容
    pNode.innerHTML = '我不是段落,哈哈~'
    //获取标签样式中的文字颜色
    var pColor = pNode.style.color;
    //修改标签样式
    pNode.style.color = 'salmon'
    pNode.style.fontSize = '30px'
    
    console.log(content, pColor)
    
    //1.创建节点
    //document.createElement(标签名) - 创建指定标签节点(创建后不会自动添加到浏览器上)
    /* a.节点属性:
     * 标签节点就是标签对象,可以通过document去网页中获取到,也可以自己创建
     * 标签对象中有相应的标签相关的属性,可以通过标签节点获取或者修改这些属性值。
     * 例如,a标签节点有:href属性, id属性, className属性, style属性等....
     *      img标签节点有:src属性,id属性,style属性,alt属性, title属性等....
     * 
     * b.innerHTML和innerText属性
     * innerHTML - 双标签的标签内容(包含其他标签)
     * innerText - 双标签的标签内容(侧重只有文字)
     */
    //创建一个div标签对象
    var divNode =  document.createElement('div')
    divNode.innerText = '我是box1'
    
    //创建一个img标签对象
    var imgNode = document.createElement('img')
    imgNode.src = 'img/thumb-1.jpg'
    
    //2.添加节点
    //a.在指定的标签中的最后添加一个节点
    //父节点.appendChild(需要添加的节点)
    var div1Node = document.getElementById('div1')
    function addDiv(){
        var divNode =  document.createElement('div')
        divNode.innerText = '我是box1'
        div1Node.appendChild(divNode)
    }
    
    //b.在指定的节点前插入一个节点
    //父节点.insertBefore(新节点, 指定节点) --- 在父节点中的指定节点前插入新节点
    div1Node.insertBefore(imgNode, div1Node.firstChild)  
    
    //3.删除节点
    //父节点.removeChild(子节点)  - 删除父节点中指定的子节点
    div1Node.removeChild(imgNode)
    //清空标签(删除所有的子标签)
    div1Node.innerHTML = null
    
    //节点.remove() - 将节点从浏览器中删除
    
    //4.拷贝节点
    //节点.cloneNode() - 拷贝指定节点,产生新的节点(浅拷贝不会拷贝节点中的子节点)
    //节点.cloneNode(true) - 拷贝指定节点,产生新的节点(深拷贝会拷贝节点中的子节点)
    var div2Node = document.getElementById('div2');
    var newDiv2Node = div2Node.cloneNode(true)
    div1Node.appendChild(newDiv2Node)
    
    //5.替换节点
    //父节点.replaceChild(新节点, 子节点) - 使用新节点替换父节点中指定的子节点
    var imgNode = document.createElement('img')
    imgNode.src = 'img/thumb-2.jpg'
    div2Node.replaceChild(imgNode, div2Node.firstElementChild)  

</script>

五、DOM属性操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <img src="img/a1.jpg"/>
        <button disabled="disabled">点我啊~</button>
    </body>
    
</html>
<script type="text/javascript">
    var imgNode = document.getElementsByTagName('img')[0]
    // 1.属性的点语法操作
    // 节点.属性 - 获取属性值; 节点.属性 = 新值  - 修改属性的值
    console.log(imgNode.src)
    imgNode.title = '图片1'
    
    var name = 'src'
    //2.通过相应方法对属性进行操作
    //a.获取属性
    //节点.getAttribute(属性名)
    var srcAttr = imgNode.getAttribute(name)
    console.log(srcAttr)
    
    //b.给属性赋值
    //节点.setAttribute(属性名, 值)
    imgNode.setAttribute('title', '帅哥1')  
    
    //c.删除属性
    //节点.removeAttribute(属性)
    var buttonNode = document.getElementsByTagName('button')[0]
    //让按钮可以点击
    buttonNode.disabled = ''
    //添加属性
    buttonNode.ytIndex = 100
    //删除属性
    buttonNode.removeAttribute('ytIndex')
        
</script>

六、练习-删除广告

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                position: relative;
            }
            #hide{
                display: none;
            }
            #ad{
                height: 100px;
                background-color: lightgoldenrodyellow;
            }
            #ad img{
                width: 100%;
                height: 100%;
            }
            #ad #close{
                position: absolute;
                top: 10px;
                right: 15px;
                width: 30px;
                height: 30px;
                background-color: lightgray;
                color: white;
                text-align: center;
                line-height: 30px;
            }
            #content{
                height: 400px;
                background-color: deepskyblue;
            }
        </style>
    </head>
    <body>
        <!--html-->
        <div id="ad">
            <img src="img/picture-1.jpg"/>
            <div id="close" onclick="close1()" style="cursor: pointer;">
                X
            </div>
        </div>
        <div id="content"></div>
        
        <!--js-->
        <script type="text/javascript">
            
//          window.location
            window.location = 'http://www.baidu.com'
            window.location.href = 'http://www.baidu.com'
            
            
            //产生0~255的随机整数
            //parseInt() - 转换成整数
            //parseFloat() - 转换成小数
            //Math.random() - 产生随机数0~1(小数)
            num = parseInt(Math.random()*255)
            
            
            console.log(num)
            function close1(){
                var adNode = document.getElementById('ad')
//              adNode.parentNode.removeChild(adNode)
                // 直接移除指定标签
//              adNode.remove()
                adNode.addEventListener('click', function(evt){
                    evt.clientX
                    evt.clientY
                    
                    evt.pageX
                    evt.pageY  
                
                    evt.cancelBubble = true
                })
                
//              window.alert()
                
                
                
                //让指定的标签不显示
                adNode.style.display = 'none'
                

            }
        </script>
        
    </body>
</html>

七、动态添加和删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                position: relative;
            }
            #top{
                margin-left: 60px;
                margin-top: 60px;
            }
            #top div{
                width: 200px;
                height: 50px;
                color: white;
                font-size: 20px;
                margin-bottom: 2px;
                text-align: center;
                line-height: 50px;
            }
            #top div font{
                position: absolute;
                right: 3px;
                /*将光标变成手*/
                cursor: pointer;
            }
            
            #bottom{
                margin-left: 60px;
            }
            #bottom #text{
                display: inline-block;
                width: 200px;
                height: 50px;
                border: none;
                outline: none;
                /*让光标在中间*/
                text-align: center;
                border-bottom: 2px solid lightgrey;
                font-size: 16px;
            }
            #bottom #button{
                display: inline-block;
                width: 100px;
                height: 30px;
                border: none;
                outline: none;
                background-color: coral;
                color: white;
            }
            
            
        </style>
    </head>
    <body>
        <div id="top">
        </div>
        <!--添加默认的水果标签-->
        <script type="text/javascript">
                var fruitArray = ['香蕉', '苹果', '草莓', '火龙果'];
                for(index in fruitArray){
                    fruitName = fruitArray[index];
                    creatFruitNode(fruitName, 'darkgreen')
                }
                //==========删除水果=============
                function delFruit(){
                    //在这儿,点击的是哪个标签this就指向谁
                    this.parentElement.remove()
                    
                }
                //添加节点
                function creatFruitNode(fruitName, color1){
                    //创建标签
                    var fruitNode = document.createElement('div')
                    fruitNode.innerHTML = fruitName;
                    var fontNode = document.createElement('font');
                    fontNode.innerText = '×';
                    //给点击事件绑定驱动程序
                    fontNode.onclick = delFruit;
                    fruitNode.appendChild(fontNode);
                    //设置背景颜色
                    fruitNode.style.backgroundColor = color1
                    //添加标签
                    var topNode = document.getElementById('top')
                    topNode.appendChild(fruitNode)
                }
            </script>
            
        <div id="bottom">
            <input type="text" name="" id="text" value="" />
            <input type="button" name="" id="button" value="确定" onclick="addFruit()"/>
        </div>
        <script type="text/javascript">
            //=========产生随机颜色=============
            function randomColor(){
                var num1 = parseInt(Math.random()*255);
                var num2 = parseInt(Math.random()*255);
                var num3 = parseInt(Math.random()*255);
                return 'rgb('+num1+','+num2+','+num3+')';
            }
            
            //==========添加水果==============
            function addFruit(){
                //获取输入框中的内容
                var inputNode = document.getElementById('text');
                var addName = inputNode.value;
                if(addName.length == 0){
                    alert('输入的内容为空!');
                    return;
                }
                //清空输入框中的内容
                inputNode.value = '';
                //创建标签
                var fruitNode = document.createElement('div');
                fruitNode.innerHTML = addName;
                var fontNode = document.createElement('font');
                fontNode.innerText = '×';
                //给点击事件绑定驱动程序
                fontNode.onclick = delFruit;
                fruitNode.appendChild(fontNode);
                //创建随机颜色
                //'rgb(255, 0, 0)'
                fruitNode.style.backgroundColor = randomColor();
                var topNode = document.getElementById('top');
                topNode.insertBefore(fruitNode, topNode.firstChild);
                
            }
        </script>
        
        
    </body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容

  • DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...
    magic_pill阅读 774评论 0 1
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,094评论 1 32
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,636评论 0 7
  • 新年重新上线,大家多提意见,支持支持。
    溪人问路阅读 865评论 0 0
  • 估计家里有娃的都体会过这种声音攻击! 今晚上给娃洗漱完毕,打算换上小睡衣哄她睡觉,娃爬到床边,指指床头柜,我给她拿...
    帅帅胡胡阅读 148评论 0 0