正文

JSAP103

IP云
IP云V管理员/7 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

flowchart 箭头图标 勿删

JSAP103

1、节点

1）定义：不是元素，节点是页面中的所有内容（标签，属性，文本）,Node。它使得任何标签中的元素获取都十分方便

2）节点的相关属性 

可以使用标签即元素点出来，可以使用属性节点点出来，也可以通过文本节点点出来

nodeType:

1:标签

2：属性

3：文本

nodeName:节点的名字

1：标签节点:大写的标签名字

2：属性节点：小写的属性名字

3：文本节点：#text

nodeValue:节点的值

标签节点：null

属性节点：属性值

文本节点：文本内容

3）获取相关的父级节点和父级元素

只有标签才能作为父节点，属性和文本不存在嵌套关系

对象名.parentNode

对象名.parentElement

获取属性

.nodeName

等

2）寻找子节点,注意节点包括换行和空格等

.childNodes

寻找子元素

children

试判断div中子节点和子元素的个数



子节点：

一对标签算一个节点，同时标签后的空白与换行(text 也算一个节点，共7个

子元素：仅指标签，共3个 

//遍历获取子节点

for(var i=0;i<dvObj.childNodes.length;i++){

var node=dvObj,childNodes[i];

}

对象名.getAttributeNode(“属性名”);

将获得属性节点的三个属性

3）

第一个子节点：

.firstChild

第一个子元素：

.firstElementChild

最后一个子节点（在ie8中是第一个子元素）：

.lastChild

最后一个子元素(ie8不支持)：

.lastElementChild

某个元素的前一个兄弟节点（在ie8中是第一个子元素，下同）：

previouSibling

某个元素的前一个兄弟元素（ie8不支持，下同 ）：

previouElementSibling

某个元素的后一个兄弟元素：

.nextSibling

某个元素的后一个兄弟节点：

.nextElementSibling

前两个所有浏览器都支持但对于后面的，关于节点的变成关于元素的，原本关于元素的不支持。

凡是获取节点的代码，在谷歌与火狐中，得到的都是相关的节点；凡是获取元素的代码在谷歌和火狐得到的都是相关的元素；从子节点和兄弟节点开始，凡是获取节点的代码在ie8中得到的是元素；获取元素的相关代码，在ie8中得到的是undefined,即不支持 

//案例：通过节点操作元素的背景颜色

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div {

            width: 300px;

            height: 650px;

            border: 1px red dotted;

        }

    </style>

</head>

<body>

<input type="button" value="变色" id="btn">

<div id="dv">

    <span>span1</span>

    <p>p1</p>

    <span>span2</span>

    <p>p2</p>

    <span>span3</span>

    <p>p3</p>

    <a href="http://www.;baidu.com"></a>

</div>

<script>

    function my$(id) {

        return document.getElementById(id);

    }

    //注册点击事件

    my$("btn").onclick = function () {

        //获取div

        var dvObj = my$("dv");

        //获取里面所有子节点

        var nodes = dvObj.childNodes;

        //循环遍历，判断是不是P标签

        for (var i = 0; i < nodes.length; i++) {

            if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {

                nodes[i].style.backgroundColor = "red";

            }

        }

    }

</script>

</body>
案例：隔行变色

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

    </style>

</head>

<body>

<ul id="uu">

    <li>你好吗</li>

    <li>你好吗</li>

    <li>你好吗</li>

    <li>你好吗</li>

    <li>你好吗</li>

    <li>你好吗</li>

    <li>你好吗</li>

    <li>你好吗</li>

</ul>

<script>

    //隔行变色

    function my$(id) {

        return document.getElementById(id);

    };

    var count = 0;//记录有多少li

    //获取ul中所有的子节点

    var nodes = my$("uu").childNodes;

    for (var i = 0; i < nodes.length; i++) {

        if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {

            nodes[i].style.backgroundColor = count % 2 == 0 ? "red" : "blue";

            count++;

        }

    }

</script>

</body>

5、封装节点兼容代码

兼容性问题



获取任意一个父级元素的第一个子级元素： 

function getFirstElementChild(element){

if( element.firstElementChild){//undefinded自动转为布尔型

return element.firstElementChild;

}else{

//为了避免有些浏览器中firstChild方法返回的是子节点，需要进行判断

var node=element.firstChild;//第一个节点

while(node||node.nodeType!=1){//node无意义或该节点不是标签

node=node.nextSiling;

}

return node;

}

}

获取任意一个父级元素的最后一个子元素 

function getLastElementChild(){

if( element.lastElementChild){//undefinded自动转为布尔型

return element.lastElementChild;

}else{

//为了避免有些浏览器中lastChild方法返回的是子节点，需要进行判断

var node=element.lastChild;//倒数第一个节点

while(node||node.nodeType!=1){//node无意义或该节点不是标签

node=node.previouSiling;

}

return node;

}

}
//案例切换背景图片

背景图片用url

外面是双引号，里面是变量的时候，变量 拼接 要用双引号；如果外边是单引号，里面 拼接 变量也是单引号； 

//案例：全选与全不选





最后，ckAll.checked=flag;

6、元素创建的不同方式



1）第一种元素创建方式 

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

    </style>

</head>

<body>

<input type="button" value="创建p" id="btn"/>

你好

<script>

    function my$(id) {

        return document.getElementById(id);

    }

    my$("btn").onclick = function () {

        document.write("<p>早餐是鳗鱼饭</p>");

    };

    // document.write(）创建元素，如果是在页面加载完毕后，此时通过这种方式创建元素，页面中的所有内容

    //都会被重写而被代替。如果是在页面未加载完成时执行，则不会出现以上情况

</script>

</body>

第二种方式： 

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

div{

    height: 300px;

    width: 400px;

    border: 1px dashed red;

}

    </style>

</head>

<body>

<input type="button" value="创建p" id="btn"/>

你好

<div id="dv"></div>

<script>

    function my$(id) {

        return document.getElementById(id);

    }

    //点击按钮，在div中创建一个p标签

    my$("btn").onclick = function () {

        my$("dv").innerHTML="<p>早餐是三明治</p>";

    }

</script>

</body>

不建议body使用innerHTML属性，因为这样同样会使得body内元素被重写

第三种方式： 

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div {

            width: 200px;

            length: 400px;

            border: 1px red dashed;

        }

    </style>

</head>

<body>

<input type="button" value="创建p" id="btn"/>

<div id="dv"></div>

<script>

    function my$(id) {

        return document.getElementById(id)

    }

    //创建元素

    //把元素追加到父元素中

    //点击按钮，在div中创建一个p

    my$("btn").onclick = function () {

        //创建元素,该方法返回一个对象

        var pObj = document.createElement("p");

        //把创建后的子元素追加到父元素中

        my$("dv").appendChild(pObj);//可多次追加

    };

</script>

</body>

双引号内如果是字符串则使用单引号，是变量就要用双引号。

通过innerHTML插入图片： 

//案例：动态创建列表

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div {

            width: 300px;

            height: 400px;

            background-color: aqua;

        }

    </style>

</head>

<body>

<input type="button" value="创建列表" id="btn"/>

<div id="dv">

</div>

<script>

    function my$(id) {

        return document.getElementById(id)

    }

    var names = ["鹿目圆", "美树沙耶加", "巴麻美", "佐仓杏子", "晓美焰"];

    my$("btn").onclick = function () {

        var str = "<ul style='list-style-type: none;cursor: pointer'>";

        //根据循环创建对应数目的li

        for (var i = 0; i < names.length; i++) {

            str += "<li>" + names[i] + "</li>";

        }

        str += "</ul>";

        my$("dv").innerHTML = str;

    }

</script>

</body>

document.write可以嵌入外部的代码内容 

案例：动态创建列表2

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style-type: none;

            cursor: pointer;

        }

        div {

            width: 200px;

            height: 400px;

            border: 2px solid red;

        }

    </style>

</head>

<body>

<input type="button" value="创建列表" id="btn"/>

<div id="dv"></div>

<script>

    function my$(id) {

        return document.getElementById(id)

    }

    function mouseoverHandle() {

        this.style.backgroundColor = "yellow";

    }

    function mouseoutHandle() {

        this.style.backgroundColor = "";

    }

    var qishu = ["浩气四塞", "借物代形", "八方归元", "祭偶灭灵", "残月锁漪"];

    //点击按钮动态地创建列表，把列表加到div中

    my$("btn").onclick = function () {

        //创建ul,把ul立刻加入到父级元素中

        var ulObj = document.createElement("ul");

        my$("dv").appendChild(ulObj);

        //动态地创建li，加到ul中

        for (var i = 0; i < qishu.length; i++) {

            var liObj = document.createElement("li");

            //设置li中的文字内容

            liObj.innerText = qishu[i];

            ulObj.appendChild(liObj);

            //高亮显示

            //为li添加鼠标进入事件

            liObj.onmouseover = mouseoverHandle;

            //为li添加鼠标离开事件

            liObj.onmouseout = mouseoutHandle;

        }

    }

</script>

</body>
案例：点击按钮创建表格

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div {

            width: 200px;

            height: 200px;

            border: 1px dashed red;

        table, tr, td {

            border: 1px;

        }

        }

    </style>

</head>

<body>

<input type="button" value="创建表格" id="btn"/>

<div id="dv"></div>

<script>

    function my$(id) {

        return document.getElementById(id)

    }

    //点击按钮常见表格

    my$("btn").onclick = function () {

    }

    var arr = [

        {name: "挞拔玉儿", href: "#"},//第一个元素

        {name: "于小雪", href: "#"},

        {name: "独孤宁可", href: "#"},

        {name: "陈靖仇", href: "#"},

        {name: "何然", href: "#"}];

    //点击按钮创建表格

    my$("btn").onclick = function () {

        //创建table加入到div中

        var tabObj = document.createElement("table");

        my$("dv").appendChild(tabObj);

        //创建行,把行加入到table中

        for (var i = 0; i < arr.length; i++) {

            var dt = arr[i];//每个对象

            var trObj = document.createElement("tr")

            tabObj.appendChild(trObj);

            //创建第一个单元格,加入行中

            var td1 = document.createElement("td");

            td1.innerText = dt.name;

            trObj.appendChild(td1);

            //创建第二个单元格

            var td2 = document.createElement("td");

            td2.innerHTML = "<a href=" + dt.href + ">" + dt.name + "</a>";

            trObj.appendChild(td2);

        }

    }

    ;

</script>

</body>

7、元素相关的操作方法

追加是在后边追加

.insertBefore(newChild,refChild)

在某元素之前追加一个元素。第一个参数是需要追加的元素，第二个参数是参照元素，将在它前面追加

.replaceChild(newChild,refChild)

替换元素，参照的元素将被替换为新的元素

.removeChild(oldChild)

移除父级元素中的某一子级元素 

my$("dv").removeChild(my$("dv").firstElementChild);//删除第一个子元素

删除所有子级元素

限制只能创建一个元素

有则删除，无则创建



或

8、为元素绑定事件

1）添加多个事件而不被覆盖

.addEventListener(事件的类型即名字但没有on是字符串类型,事件处理函数可命名可匿名,false)



2）另一种方法（为了兼容ie8）

.attachEvent(type,listener)

type，字符串，事件类型，带有on，谷歌不支持

listener,事件处理函数

3）兼容代码

为任意元素，绑定任意事件

boolean flag=对象名.方法名；//注意没有括号，若该对象存在该方法，返回true

相关阅读

目录[+]