JavaScript-DOM初探

2017-02-24  本文已影响0人  阿九是只大胖喵

DOM: Document Object Model -> 文档对象模型。
DOM就是描述整个HTML页面中描述节点关系到图谱,在DOM中,提供了很多的获取元素的方法和之间关系的属性,以及操作这些元素的方法。

  1. 获取页面中获取元素的方法
    document.getElementById('元素的ID值');在整个文档中,通过元素的ID获取到这个元素对象,获取的是一个元素。
    注意:如果页面中id重复了,那么这个方法默认只获取第一个元素。在IE6、7下,会把表单元素(input)的name属性值当做id来使用。在IE7、7下,不区分id的大小写。
    项目实战注意:不要让表单元素的name和其他元素的id冲突。不要用id的大小写来区分不同的元素。
    如果没有获取到元素,返回的结果是null。
    var oDiv = document.getElementById('tab');

    // 可以直接的用元素的id来代表当前这个元素对象(不推荐使用)
    console.log(tab); // tab是id值
  1. 通过元素的标签名,来获取一组元素(是多个元素,有几个满足条件的元素,就获取几个)。在整个文档中,通过元素的标签名获取一组元素。这一组元素是对象数据类型的结果,并且是一个类数组(以数字作为索引,索引从0开始,逐级递增,索引代表的是当前对应的某一个元素,有一个叫做length的属性,代表获取的个数)。
document.getElementsByTagName('元素标签名');

document称之为上下文(context),就是我们可以自己限定当前获取元素的范围,获取整个文档中的li。

    var oLis = document.getElementsByTagName('li');
    console.dir(oLis);
    console.log(oLis.length); // 代表获取元素的个数

document称之为上下文(context),就是我们可以自己限定当前获取元素的范围。getElementById的上下文只能是document。

    // 获得id为tab下的所有li
    var oTab = document.getElementById('tab');
    var oLis = oTab.getElementsByTagName('li');
    console.dir(oLis);
  1. context.getElementsByName()通过元素name属性的值获取一组元素。在IE浏览器下,只对表单元素其作用,这个方法应用于获取具有同样name的表单元素。
    var oDivs = document.getElementsByName('element');
    console.log(oDivs);
  1. context.getElementsByClassName()通过元素的类名(class值)获取一组元素。这个方法在项目中最常用的获取元素的方法,但是这个方法不兼容,在IE6-8中,会报错。获取多个元素的这几个方法,即使获取的只有一个,它也是类数组,也是一个集合,如果想用其中的第一个元素,也需要通过索引拿出来使用。
var oList = document.getElementsByClassName('tag');
    document.documentElement // 获取HTML元素
    document.body // 获取body元素

    // 兼容所有浏览器的获取当前屏幕的宽度,高度
    var curWidth = document.documentElement.clientWidth || document.body.clientWidth;
    var curHeight = document.documentElement.clientHeight || document.body.clientHeight;

6.在移动端获取元素常用的方法,(IE6-8下不兼容)。

     document.querySelector(); 获取一个
     document.querySelectorAll(); 获取多个,得到类数组集合
     var ele = document.querySelector('#id');
     var ele = document.querySelector('.class');
     var eles = document.querySelectorAll('#tab li');

DOM的节点关系
节点:Node 一个页面中标签,文字,注释...都是节点。
对于一个HTML文档:

<div id="div1">
    <h1>前端</h1>
    <!--这里是注释-->
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li id="li3">JavaScript</li>
        <li>HTML5移动端</li>
        <li>NodeJS</li>
    </ul>
</div>

则获取关系的属性如下:

    // childNodes: 获取元素的所有子节点
    // children: 获取所有的元素子节点
    // parentNode: 获取父亲节点
    // previousSibling: 获取上一个哥哥节点
    // nextSibling: 获取下一个弟弟节点
    // firstChild: 获得所有子节点中的第一个
    // lastChild: 获得所有子节点的最后一个
    console.log(oDiv.childNodes); // 获取所有的子节点
    console.log(oDiv.children)
    console.log(oDiv.parentNode);
    console.log(oDiv.previousSibling);
    console.log(oDiv.nextSibling);
    console.log(oDiv.firstChild);
    console.log(oDiv.lastChild);
// 在JavaScript中,需要我们掌握的节点类型:
// nodeType, nodeName, nodeValue
// 元素节点(元素标签)1, 大写的标签名, null
// 文本节点(文字)   3, #text, 文字内容
// 注释节点(注释)   8, #comment, 注释内容
// document        9, #document, null
var oDiv = document.getElementById('div1');
console.log(oDiv.nodeType); // 1
console.log(oDiv.nodeName); // "DIV"
console.log(oDiv.nodeValue); // null

实例
在标准浏览器下,把空格(space)和Enter(回车)都当做文本节点处理。 写一个方法,模拟children方法,实现获取指定元素下的元素。

    // 写一个方法,模拟children方法,实现获取指定元素下的元素子节点
    /*
    * getMyChildren: 获取指定元素下所有的元素节点
    * @parameter:
    *   ele: 我们要获取哪个元素下的元素节点,就传递什么元素
    * @parameter:
    *   tagName: 获取那种类型的元素,例如:传入div,只获取div
    * @return:
    *   最终获取的元素子节点
    * */
    function getMyChildren(ele, tagName) {
        var ary = [];
        var nodes = ele.childNodes;
        for (var i = 0; i < nodes.length; i++) {
            var cur = nodes[i];
            if (cur.nodeType === 1) {
                if (tagName) {
                    if (cur.nodeName.toLowerCase() === tagName.toLowerCase()) {
                        ary.push(cur);
                    }
                } else {
                    // 如果没有传递tagName,则默认把所有元素放到数组中
                    ary.push(cur);
                }
            }
        }
        return ary;
    }

元素的增删改
动态创建一个元素标签。

    // 动态创建一个元素标签
    // document.createElement(): 创建一个元素标签对象
    // appendChild: 把这个元素添加到指定的元素的末尾位置, -> 容器.appendChild(元素)。
    // insertBefore(): 把新的元素newEle添加到老的元素oldElem之前
    // oldEle.parentNode.insertBefore(newEle, oldEle)
    // removeChild: 删除指定元素

    // 动态创建一个div元素对象
    var oDiv = document.createElement('div');
    oDiv.id = 'div1';
    oDiv.style.width = '100px';
    oDiv.style.height = '100px';
    oDiv.style.border = '1px solid  red';

    // 把创建好的元素添加到页面中
    document.body.appendChild(oDiv);

    var oP = document.createElement('p');
    oP.id = 'p1';
    oP.style.width = '100px';
    oP.style.height = '100px';
    oP.style.border = '1px solid  black';
    document.body.insertBefore(oP, oDiv);

    oDiv.parentNode.removeChild(oP);

    var cloNode = oDiv.cloneNode(true);
    // 克隆一个元素 true -> 把元素里面子子孙孙都克隆,默认是false,只克隆当前的

    var dd = document.createElement('div');
    dd.style.background = 'blue';
    oP.parentNode.replaceChild(dd, oDiv); // 替换

    // setAttribute: 设置元素的属性,包含自定义的,是修改HTML元素的结构的,使用这个方法,可以再HTML上体现出来
    dd.setAttribute('data-new', '自定义属性');
    console.log(dd.getAttribute('data-new'));
    dd.removeAttribute('data-new');
    // 在IE6-8下,这个方法不能修改class属性
上一篇下一篇

猜你喜欢

热点阅读