JavaScript学习Day005(操作节点)

操作DOM

DOM：Document Object Model（文档对象模型）

节点和节点的关系

节点属性

Element属性

节点信息

    nodeName：节点名称
    nodeValue：节点值
    nodeType：节点类型

操作节点属性

设置属性

        setAttribute()方法添加指定的属性，并为其赋指定的值
        语法：element.setAttribute(attributename,attributevalue)--attributename(属性名称)、attributevalue(属性值)

获取属性

        getAttribute() 方法返回指定属性名的属性值
        语法：element.getAttribute(attributename)  attributename必需。需要获得属性值的属性名称 

删除属性

        removeAttribute() 方法删除指定的属性
        语法：element.removeAttribute(attributename)   attributename--要移除的属性名称

<script>
    var imgEle = document.querySelector('img');

    var srcAttribute = imgEle.getAttribute('src');
    console.log(srcAttribute);

    console.log(imgEle.getAttribute('width'));

    //设置img元素的src属性值和width属性值
    imgEle.setAttribute('src','img/5555.jpg');
    imgEle.setAttribute('width','1000px');

    //删除img元素的width属性
    imgEle.removeAttribute('width');
</script>

节点的操作

创建

创建元素:createElement
创建文本节点:createTextNode

插入

文本节点插入到元素中:createELe.appendChild(createTextNode)
将组装好后的元素添加到父元素中
方法1：var ulEle = document.querySelector('ul')
方法2：ulEle.insertBefore(createELe,ulEle.firstElementChild)

删除

通过父元素删除子元素：ulEle.removeChild(ulELe.firstElementChild)

替换

通过父元素替换一个子元素：ulEle.replaceChild(createELe,ulEle.firstElementChild)

<script>
    //需求：想ul元素中再添加一个li元素

    //创建li元素
    var createELe= document.createElement('li');
    console.log(createELe);
    //创建文本节点
    var createTextNode = document.createTextNode('列表项第二项');
    console.log(createTextNode);

    //将创建好的文本节点插入到创建的元素中
    createELe.appendChild(createTextNode);
    console.log(createELe);

    //将组装好后的元素添加都ul元素中
    //获取ul元素，然后通过ul元素添加组装好的li元素
    var ulEle = document.querySelector('ul');
    ulEle.appendChild(createELe);

    // ulEle.insertBefore(createELe,ulEle.firstElementChild);

    //删除节点：也要通过父元素来删除子元素
    ulEle.removeChild(ulELe.firstElementChild);

    //替换节点：通过父元素替换一个子元素
    ulEle.replaceChild(createELe,ulEle.firstElementChild)
</script>

节点复制

    cloneNode():()中没有写参数或者写一个false，表示浅克隆，只克隆标签，不克隆内容
    cloneNode(true):表示深克隆，再克隆标签中的同时，所有的内容都会克隆，包括子标签

<script>
    //获取ul元素并赋值
    var ulEle = document.querySelector('ul');
    console.log(ulEle);

    //cloneNode():()中没有写参数或者写一个false，表示浅克隆，只克隆标签，不克隆内容
    var cloneUlEle = ulEle.cloneNode();
    console.log(cloneUlEle);

    var cloneUlEle = ulEle.cloneNode(false);
    console.log(cloneUlEle);

    //cloneNode(true):表示深克隆，再克隆标签中的同时，所有的内容都会克隆，包括子标签
    var cloneUlEle = ulEle.cloneNode(true);
    console.log(cloneUlEle);
</script>

操作节点样式

改变样式属性

style属性：HTML元素.style.样式属性＝"值"
className属性：HTML元素.className="样式名称"

获取元素样式

HTML元素.style.样式属性;
document.defaultView.getComputedStyle(元素,null).属性;
HTML元素. currentStyle.样式属性;

HTML中元素属性

元素属性应用

            标准浏览器
                document.documentElement.scrollTop;
            Chrome
                document.body.scrollTop;

<script>
    //给h2标签设置样式
    var h2Ele = document.querySelector('h2');
    // h2Ele.style.width='300px';
    // h2Ele.style.height='200px';
    // h2Ele.style.backgroundColor='#ccc';
    h2Ele.className='demo';


    //给p标签设置样式
    var pEle = document.querySelector('p');
    // pEle.style.width='300px';
    // pEle.style.height='200px';
    // pEle.style.backgroundColor='#ccc';
    pEle.className='demo';

    //给div标签设置样式
    var divEle = document.querySelector('div');
    // divEle.style.width='300px';
    // divEle.style.height='200px';
    // divEle.style.backgroundColor='#ccc';

    // divEle.className='demo text';
    
    //将里面的样式去掉，直接设为空的
    divEle.className='';
</script>