09JavaScript之操作节点属性、删除和替换节点、修改属性、获取元素的样式、获取元素位置

操作节点属性：

其中：setAttribute会设置属性（a,b），a是设置属性名，b是属性值

<p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来 <input type="radio" name="book" onclick="book()">灰霾来了怎么办</p>
<div><img src="" alt="" id="image" onclick="img()"><span></span></div>

<script>
    function book(){
        var ele=document.getElementsByName("book");
        var img=document.getElementById("image");
        if(ele[0].checked){
            img.setAttribute("src","images/dog.jpg");
            img.setAttribute("alt","我和狗狗一起活下来");
            img.nextSibling.innerHTML="我和狗狗一起活下来";
        }
        else if(ele[1].checked){
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("alt","灰霾来了怎么办");
            img.nextSibling.innerHTML="灰霾来了怎么办";
        }
    }
    function img(){
        var alt=document.getElementById("image").getAttribute("alt");
        alert("图片的alt："+alt)
    }
</script>

删除和替换节点

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法:

nodeObject.removeChild(node)

参数:

node ：必需，指定需要删除的节点。

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法：

document.createElement(tagName)

参数:

tagName：字符串值，这个字符串用来指明创建元素的类型。

注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

示例：

 <ul>
        <li>
            <img src="images/f01.jpg" id="first">
            <p><input type="button" value="删除我吧" onclick="del()"></p>
        </li>
        <li>
            <img src="images/f02.jpg" id="second">
            <p><input type="button" value="换换我吧" onclick="rep()"></p>
        </li>
    </ul>
<script>
    function del(){
        var delNode=document.getElementById("first");
        delNode.parentNode.removeChild(delNode);
    }
    function rep(){
        var oldNode=document.getElementById("second");
        var newNode=document.createElement("img");
        newNode.setAttribute("src","images/f03.jpg");
        oldNode.parentNode.replaceChild(newNode,oldNode);
    }
</script>

修改属性：

改变样式的属性

1. style属性
2. className属性

• style属性：

语法：

HTML元素.style.样式属性＝"值"

示例：

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

例如：

function over(){
        document.getElementById("cart").style.backgroundColor="#ffffff";
        document.getElementById("cart").style.zIndex="100";
        document.getElementById("cart").style.borderBottom="none";
        document.getElementById("cartList").style.display="block";
        document.getElementById("cartList").style.position="relative";
        document.getElementById("cartList").style.top="-1px";
}

• className属性：

语法：

HTML元素.className="样式名称"

示例：

function over(){
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
     }
function out(){
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
     }

获取元素的样式：

语法：

HTML元素.style.样式属性;

示例：

alert(document.getElementById("cartList").display);

语法：

document.defaultView.getComputedStyle(元素,null).属性;

示例：

var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);

语法：

HTML元素. currentStyle.样式属性;

示例：

alert(document.getElementById("cartList").currentStyle.display);

获取元素位置：

HTML中元素属性：

示例：

document.documentElement.scrollTop;
document.documentElement.scrollLeft;//标准浏览器
或者
document.body.scrollTop;
document.body.scrollLeft;//Chrome