JavaScript操作节点

2018年4月22日星期日

节点的属性

previousSibling 属性返回同一树层级中指定节点的前一个节点。

被返回的节点以 Node 对象的形式返回。

注释：如果没有 previousSibling 节点，则返回值是 null。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问节点</title>
    <link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<section id="news">
    <header>京东快报 <a href="#">更多</a></header>
    <ul>
        <li>
            <a href="#">新闻头条No1</a>
        </li>
        <li>
            <a href="#">新闻头条No2</a>
        </li>
        <li>
            <a href="#">新闻头条No3</a>
        </li>
        <li>
            <a href="#">新闻头条No4</a>
        </li>
    </ul>
</section>

<script>

var sec = document.getElementById("news");
    var le = sec.childNodes.length;
    var str = sec.lastChild.previousSibling;   //取得最后一个节点
//    str = str.innerHTML;
    var str2 = str.nextElementSibling || str.nextSibling;

alert(le);
alert(str2);

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

节点信息

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点信息</title>
</head>
<body>
<ul id="nodeList">
    <li>nodeName</li>
    <li>nodeValue</li>
    <li>nodeType</li>
</ul>
<p></p>
<script>
    var nodes = document.getElementById("nodeList");
    var type = nodes.firstChild.nodeType;
    var name = nodes.firstChild.nodeName;
    var str = nodes.firstChild.nodeValue;
    document.getElementsByTagName("p")[0].innerHTML = "type1-" + type1+"<br/>"
    +"name-" + name +"<br/>"+"Value-" + str;
</script>
</body>
</html>

操作节点一

getElementsByName(节点名); 通过这种方式取得节点对象
getElementById (节点名); 通过这种方式取得节点对象

设置节点

对象名. setAttribute("节点名","要设置的值")；

示例：

div {
            padding: 5px;
            text-align: center;
        }

div span {
            display: block;
        }
    </style>
</head>
<body>
<p>选择你喜欢的书：<input type="radio" name="book" οnclick="book()">我和狗狗一起活下来
    <input type="radio" name="book" οnclick="book()">灰霾来了怎么办
</p>
<div><img src="" alt="" id="image" οnclick="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.nextElementSibling.innerHTML = "我和狗狗一起活下来";

;        }else if (ele[1].checked){
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("alt","灰霾来了怎么办")
//            img.nextSibling.innerHTML="灰霾来了怎么办";
            img.nextSibling.innerHTML = "灰霾来了怎么办";
        }
    }
    function img() {
        var img = document.getElementById("image");

alert(img.getAttribute("alt") + img.getAttribute("src"));
}
</script>
</body>
</html>

操作节点二

document.createElement("节点名称"); 创建一个节点

cloneNode() 创建节点的拷贝，并返回该副本。如果参数是true 则克隆所有有关这个节点的后代

insertBefore()在指定的已有子节点之前插入新的子节点

示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选择你喜欢的书</title>
    <style>
        *{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}
        div{padding: 5px; text-align: center;
        }
        div span{display: block;}
    </style>
</head>
<body>
<p>选择你喜欢的书：<input type="radio" name="book" οnclick="book()">我和狗狗一起活下来
    <input type="radio" name="book" οnclick="book()">灰霾来了怎么办</p>
<div></div>
<script>
    function book() {
        //取得name为book的对象
        var ele = document.getElementsByName("book");
        //取得div的第0个元素
        var domDiv = document.getElementsByTagName("div")[0];

if (ele[0].checked){
            //创建一个节点
            var img = document.createElement("img");
            //给这个节点设置src的内容
            img.setAttribute("src","images/dog.jpg");
            //给div添加这个节点
            domDiv.appendChild(img);
        }if(ele[1].checked){
            var img = document.createElement("img");
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("onclick","copyNode()");
            domDiv.appendChild(img);
        }
    }

function copyNode() {
        //取得第1个节点元素
        var domDiv = document.getElementsByTagName("div")[0];
        //cloneNode() 创建节点的拷贝，并返回该副本。如果参数是true 则克隆所有有关这个节点的后代
        var newDom = domDiv.lastChild.cloneNode(false);
        //insertBefore()在指定的已有子节点之前插入新的子节点
        domDiv.insertBefore(newDom,domDiv.firstChild);
    }
</script>
</body>
</html>

操作节点三

parentNode属性以 Node 对象的形式返回指定节点的父节点。

removeChild() 删除某个节点元素

replaceChild (新的节点,旧的节点) 替换某个节点元素

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换和删除节点</title>
</head>
<body>
<ul>
    <li>
        <img src="data:images/f01.jpg" id="first">
        <p><input type="button" value="删除我吧" οnclick="del()"></p>
    </li>
    <li>
        <img src="data:images/f02.jpg" id="second">
        <p><input type="button" value="换换我吧" οnclick="rep()"></p>
    </li>
</ul>
<script>
    function del() {
        //取得Id为first的节点元素
        var oldNode = document.getElementById("first");
        //parentNode属性以 Node 对象的形式返回指定节点的父节点。
        //removeChild() 删除某个节点元素
        oldNode.parentNode.removeChild(oldNode);
    }

function rep() {
        var oldNode = document.getElementById("second");
        var newNode = document.createElement("img");
        newNode.setAttribute("src","images/f03.jpg");
        //replaceChild (新的节点,旧的节点) 替换某个节点元素
        oldNode.parentNode.replaceChild(newNode,oldNode);
    }
</script>
</body>
</html>

操作节点四

onmouseover 鼠标悬浮事件

onmouseout 鼠标移开事件

className 取得样式改变

document.defaultView.getComputedStyle(对象名,null).background 大部分的浏览器能够支持的取得元素样式的方式

对象名.currentStyle.background; 兼容IE的取得元素样式的方法

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标悬浮事件Demo</title>
    <link rel="stylesheet" href="css/shopping.css">
</head>
<body>
<section id="shopping">
    <div id="cart" οnmοuseοver="over()" οnmοuseοut="out()">我的购物车<span>1</span></div>
    <div id="cartList">
        <h2>最新加入的商品</h2>
        <ul>
            <li><img src="data:images/makeup.jpg"></li>
            <li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
            <li>¥558.00×1<br/>删除</li>
        </ul>
        <div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
    </div>
</section>
<script>
    /**
     * 鼠标悬浮事件
     */
    var cart = document.getElementById("cart");
    var cartList = document.getElementById("cartList");
    function over() {
        /*改变样式
        cart.style.background = "#ffffff";
        cart.style.zIndex = "100";
        cart.style.borderBottom = "none";
        cartList.style.display = "block";
        cartList.style.position = "relative";
        cartList.style.top = "-1px";
         */
       cart.className = "cartOver";
        cartList.className = "cartListOver";
         }
    /**
     * 鼠标移开事件
     */
    function out() {
        cart.className = "cartOut";
        cartList.className = "cartListOut";

/*改变样式
        cart.style.background = "#f9f9f9";
        cart.style.borderBottom = "solid 1px #dcdcdc";
        cartList.style.display = "none";
        */
    }

     alert(document.defaultView.getComputedStyle(cartList,null).background);alert(cartList.currentStyle.background);</script></body></html>

总结

1. 操作节点的属性

2. 创建和插入节点

3. 删除和替换节点

4. 操作节点样式

5. 获取元素的样式

雀雀JavaScript操作节点相关推荐

JavaScript的节点操作 —— 增加节点
目录 JavaScript中的节点操作分为:增.删.改.查(获取),四大类型. 我们直接利用案例来学习: HTML布局代码: JavaScript代码实现: 第一步:获取所有要用到的元素对象(可以利用 ...
雀雀JavaScript基础Note2
JavaScript基础Note2 2018年4月20日星期五系统函数 parseInt 字符串转整形 parseFloat 字符串转浮点型 isNaN 检查是否非数字示例: <script ...
javascript中节点操作、节点属性、节点获取、创建节点、删除节点、克隆节点
节点操作节点操作实际是利用DOM树把节点划分为不同的层次关系,常见父子兄弟级关系节点属性: 节点一般有三个属性:nodeType节点类型(其中元素节点值为1,属性节点值为2,文本节点值为3).no ...
Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念在讲解操作DOM的api之前, ...
JavaScript操作DOM对象
目录一.DOM操作 (一).DOM操作分类 (二).节点和节点的关系 (三).访问节点 (四).节点信息二.操作节点 (一)操作节点的属性 (二).创建和插入节点 (三).删除和替换节点 (四). ...
【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
javascript操作表格案例讲解
本案例是一个简单表格,通过javascript DOM相关技术,实现对表格的删除更改.案例代码详细的表达了思路分析,适合DOM初学者. <!doctype html> <html l ...
jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器表 ...
JavaScript操作DOM对象 Day05
JavaScript操作DOM对象 0 核心浏览器网页就是一个Dom树形结构! 获取Dom节点:得到Dom节点更新:更新Dom节点添加:添加一个新的节点删除:删除一个Dom节点要操作一个Do ...

雀雀JavaScript操作节点