JSAP103

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
这里写图片描述

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Tanqurey/p/10485293.html