Dom对象和节点元素的获取

最新推荐文章于 2024-02-28 17:54:27 发布

KKXXZX

最新推荐文章于 2024-02-28 17:54:27 发布

阅读量535

点赞数

分类专栏： JavaScript学习笔记文章标签： jscript

本文链接：https://blog.csdn.net/zx6571269/article/details/78393270

版权

JavaScript学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

对象

对象：万物都是对象，对象去描述真实的世界

语法规则： {} 一对大括号用来定义一个对象
：冒号为属性赋值
, 逗号分隔属性

属性：姓名，年龄

方法：

<script>
//name,age属于对象属性
var a={name:"张三",age:12};
console.log(a.name)
<script />

方法的使用

<script>
    var laoWang = {name:"张三",age:15,chart:function(){
    console.log("我正在聊天！");
    },runing:function(){
    console.log("我正在跑步！");
    }};
    laoWang.chart();
    laoWang.runing();
</script>

Dom

Dom: document,每个载入游览器的html文档都会成为document对象，利用它可对html页面中的所有元素进行访问。提供：添加，移动，改变或移除结构文档的方法和属性

getElementById():返回对拥有指定id的第一个对象的引用
getElementsByTagName():返回带指定名称的对象集合
getElementsByName()：返回带有指定名称的对象集合
document.querySelector的用法

<body>
        <input type="text" id="test"/>
        <input type="text" id="text2"  name="moblie"/>
        <input type="text" id="text3" />
        <input type="text" id="text4" />
        <input type="text" id="text5" class="kk" />
        <script>
            var d1 = document.getElementById("test");
                d1.value="123";
            var inputs = document.getElementsByTagName("input");
            inputs[2].value="大宝";
            var inputs = document.getElementsByTagName("input");
            inputs[3].value="二宝";
            var inputs = document.getElementsByTagName("input");
            inputs[4].value="三宝";

            //获取name="moblie"的所有集合
            var inputs2=document.getElementsByName("moblie");
            //name="moblie"的第一个input赋值
            inputs2[0].value="宝宝"

            //获取class=kk的所有集合
            var inputs3 = document.getElementsByClassName("kk");
            inputs3[0].value="kk";

            //querySelector的写法
            document.querySelector("#test").value="aaa";

            document.querySelector(".kk").value="kkk";

            document.querySelector("[name=moblie]").value="moblie";
        </script>
    </body>
````
5. 元素对象的innerHTML属性可设置或返回单元格的开始标签和结束之间的HTML





<div class="se-preview-section-delimiter"></div>

```html
<script>
//当js代码上面时，要使用onload
            window.onload=function(){
                var bnt1 = document.querySelector("#bnt1");
                function changeSp(){
                    document.querySelector("span").innerHTML="百度";
                }
                bnt1.onclick = changeSp;

                var bnt2 = document.querySelector("#bnt2");

                var show = document.querySelector("#show");
                function showInput(){
                    var str="";
                    var inputs = document.querySelectorAll("input");
                    for(var i = 0;i<inputs.length;i++){
                        str = str+inputs[i].value +"<br>";  
                    }
                    show.innerHTML=str;
                }   
                bnt2.onclick = showInput;

                var bnt3 = document.querySelector("#bnt3");

                function showSeason(){
                    var str2 = "";
                    var inputs = document.querySelectorAll(".season");
                    for(var i=0;i<inputs.length;i++){
                        str2 = str2 + inputs[i].value+"<br>";
                            }

                        show.innerHTML=str2

                }

                bnt3.onclick = showSeason;

            }
        </script>

Window对象的常用方法

setTimeout(fn,millsec)在指定毫秒数后调用函数或计算表达式
setInterval(fn,millisec)按照指定的周期（以毫秒计）来调用函数或表达式,循环执行多次

    <script>
            onload=function(){
                var input1 = document.querySelector("#name");
                function change(){
                    input1.value+=1;
                    console.log("1111");

                }
                //每2s执行一次change
                setInterval(change,2000)

            }
    </script>

clearInterval（）停止setInterval；
clearTimeout（）停止clearTimeout；

<script>
            onload=function(){
                var input1 = document.querySelector("#name");
                function change(){
                    input1.value+=1;
                    console.log("1111");

                }
                //每2s执行一次change
                var xbz =setInterval(change,2000);

                //运行5秒后执行clearInterval
                var xbz2 =setTimeout(function(){
                    //清除xbz循环计数器
                    clearInterval(xbz);
                },5000)

                //当运行到第三秒时，就会清除xbz2;
                setTimeout(function(){
                    clearTimeout(xbz2)

                },3000);
            }
    </script>
    <body>
        <input type="text" id="name"/>


    </body>

Dom规定和结构

1. 整个文档是一个文档节点
2. 每个HTML标签是一个元素节点
3. 包含在HTML元素中的文本是文本节点
4. 每个HTML属性是一个属性节点
5. 注释属于注释节点

使用层次关系访问结节

parentNode：返回节点的父节点

<script>
        //父节点为body
        var node1 = document.getElementsByTagName("ul")[0];
        console.log(node1.parentNode);
        </script>

childNodes返回子节点的集合


<script>
    var node1 = document.getElementsByTagName("ul")[0];
            console.log(node1.childNodes);
            /*结果：
             * [text, li, text, li, text, li, text]
             * 
             */

<script/>

firstChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

    <ul>
            <li id="a"></li>
            <li id="b"></li>
            <li id="c"></li>
        </ul>
        <script>
            var node1 = document.getElementsByTagName("ul")[0];
            node1.firstChild.nextSibling.innerHTML=123;
            console.log(node1.firstChild.nextSibling);

        </script>

nextSibling的下一个节点
previousSibling:上一个节点
获取某个节点的属性值：getAttribute(“属性名”)
设置某个节点的属性值：setAttribute(“属性名”，”属性值”)

<script>
            var node1 = document.getElementsByTagName("ul")[0];

            console.log(node1.firstElementChild.getAttribute("xxyy"));
        //设置属性
        node1.firstElementChild.setAttribute("aaa","123");  
        </script

节点的创建

createElement(tagName):创建一个名为：tagName的新元素节点
ANode.addpendChild(BNode):把B节点追加至A节点的末尾
insertBefore(ANode,BNode):把A节点插入到B节点之前
4.removeChild(h3):将h3标签移除
5.replacechile(newNode,oldNode):用newNode来替换oldNode

    <h3 id="h3">oldNode</h3>
        <script>
            //创建一个h1节点
            var node1 = document.createElement("h1");
            node1.innerHTML="诗和远方";

            var by = document.querySelector("body");
            //body添加一个子节点，
            by.appendChild(node1);

            var h2 = document.createElement("h2");
            h2.innerHTML="美好的生活";
            //将h2插入到h1的前面
            by.insertBefore(h2,node1);

            var h3 = document.createElement("h2");
            h3.innerHTML="美好的生活2";
            by.insertBefore(h3,h2);
            //移除h3标签
            by.removeChild(h3);

            var oldNode = document.querySelector("#h3");
            var newNode = document.createElement("h3");
            newNode.innerHTML="newNode";
            //用newNode替换oldNode
            by.replaceChild(newNode,oldNode);
        </script>