2. 技术
    3. JavaScript的DOM介绍和小操作

    JavaScript的DOM介绍和小操作

    技术2022-07-12  65

    js中的DOM

    什么是DOM怎么操作练习练习从一个地方发送数据从另一个地方接受，再从中间文本框进行显示。

    什么是DOM

    DOM是文档对象模型 Document object Model 我们可以通过DOM动态改变文档内容。 动态改变文档内容的原理 解析文档（如HTML）并生成树 通过DOm标准接口+编程语言改变文档内容

    怎么操作

    获取标签，通过标签的onclick进行函数操作。

    访问节点的方法 4个：–

    查看/修改属性节点 getAttribute（“属性名”） setAttribute(“属性名”，“属性值”)

    创建和增加节点的方法 createElement（）;创建节点 appendChile（）;末尾追加式插入节点 inserBefore（）;在指定节点前插入节点 cloneNode（）;克隆节点

    如果编程的时候希望访问某个元素的父元素，但又不知道父元素的id，name，class该怎么办？ 可以根据层次关系查找节点 -parentNode -firstChild -lastChild -cells 在使用firstChild和lastChild时我们要注意我们的文本节点都会找到。

    我们使用的firstElementChild。。就可以避免上面情况。

    chileNode节点 获得所有的节点（也有空格） children。//所有的元素节点。

    层次节点属性 childNodes 获取当前元素节点的所有子节点 firstChild 获取当前元素节点的第一个子节点 lastChild 获取当前元素节点的最后一个子节点 ownDocument 获取该节点的文档根节点，相当与docunmet parentNode 获取当前节点的父节点 previousSibling 获取当前节点的前一个同一级节点 nextSibling 获取当前节点的后一个同级节点 attributes 获取当前元素节点的所有属性节点集合。

    <script> var btn=document.getElementsByTagName("button"); var ul=document.getElementById("ulk"); // var num=0; // 点击显示 再点击隐藏 btn[0].onclick = function(){ /* if(num%2==0){ ul.style.display="block"; }else{ ul.style.display="none"; } num++; */ join("ds","dsf","dsafdaf"); } function join(){ var arg=arguments; for(var i=0; i<arg.length;i++){ ul.innerHTML += "<li>"+arg[i]+"</li>" } } // var img=document.getElementsByTagName("img"); // img[0].setAttribute("src","../../imgs/link-icon1.png") // 1.设置setAttribute 取值getAttribute // 2.创建元素------ // 3.在页面插入 node.appendChild 插入node的最后面。 // 4.克隆 node.cloneNode() 克隆布尔类型。 // 5. parenNode.insertBefore(newNode,referenceNode) newNode 要插入的节点，referenceNode参考节点（该节点前插入） // parenNode:父节点，参考节点的父节点，必须要有。 // 6. parenNode.removeChild() 删除子节点。 // 7.parenNode.replaceChild() 替换子节点。 var box=document.getElementById("box"); function newnode(){ var iamg=document.createElement("img"); // 创建成功后就是游离元素 iamg.setAttribute("src","../../imgs/link-icon1.png"); box.appendChild(iamg); } // 克隆一张 function copyImg(){ var iamg=document.createElement("img"); // 里面默认是false，只克隆框。 // true的话，还复制里面的所有内容 var copyImg=iamg.cloneNode(); box.appendChild(iamg); } newnode(); // 删除 function remove(){ // 删除子节点（都支持） document.body.removeChild(); // 删除节点 document.body.remove(); } // 替换 function replace(){ document.body.replaceChild(); } </script>

    练习

    <!-- 修改div的多个属性 --> <script> var div=document.querySelector("div"); /* // 1..cssText设置 div.style.cssText="color: #5E5EFF; font-size: 50px;" // 2.根据类名进行设置 div.className="color"; */ // 如果想保存原来的属性，并添加一些属性 // 同时编写color active的class类。单纯的添加一个类后面再学 div.className ="active"; </script>

    练习从一个地方发送数据从另一个地方接受，再从中间文本框进行显示。

    <body > <div class="fl"> <div class="left"> <div class="letf_sen"> <textarea id="te"></textarea> </div> <button type="button" class="send" > send</button> </div> <div class="center"> sdfa </div> <div class="right"> <h1>消息列表 <span></span></h1> <ul class="meslist"> <!-- 先放出来 --> <!-- <li><span class="circle"></span>sd</li> --> </ul> </div> </div> </body> <script> var send=document.querySelector(".send"); var text=document.getElementsByTagName("textarea")[0]; var meslist=document.getElementsByClassName("meslist")[0]; send.onclick=function(){ if(text.value==""){ alert("不能为空"); }else{ // meslist.innerHTML+="<li>"+"<img src='imgs/link-icon1.png '/> "+ text.value+"</li>" var li=document.createElement("li"); li.innerHTML="<span class='circle'></span>" +text.value; meslist.appendChild(li); text.value=""; } /* var item=document.querySelectorAll("ul>li"); //var item= document.getElementsByTagName("li"); for(var i=0;i<item.length;i++){ item[i].οnclick=function(){ this.innerHTML="<li>"+ "<img src='imgs/link-icon2.png '/> "+this.innerText+"</li>" } } */ circhange(); } function circhange(){ var lis=document.querySelectorAll(".meslist>li"); var span=document.querySelectorAll(".circle"); var inner=document.querySelector(".center"); for(var i=0;i<lis.length;i++){ lis[i].onclick=function(){ this.firstElementChild.style.backgroundColor="blue"; inner.innerText=this.innerText; } } } </script>

    补充：单行显示，多余的东西显示省略号。

    .meslist{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    Processed: 0.019, SQL: 9