JS操作html元素节点(Node)

web.jpeg

JS有三部分组成

• ECMAscript(欧洲计算机制造商协会) ： 描述了JS的语法和基本对象的规范
• DOM：文档对象模型，处理网页的内容方法和接口
• BOM ：浏览器对象模型，浏览器交互的方法和接口

我们知道 整个文档document，

• 元素:页面中所有的标签,元素---element, 标签----元素---对象
• 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
• 根元素:html标签
  这样就构成了DOM树

dom树.gif

我们在JS操作html元素认知有提到获取元素的一些方法

• getElementById() id 访问节点
• getElementsByTagName() 标签访问节点 数组
• getElementsByClassName() 类名 有兼容性问题

现在描述三个节点属性

• nodeType 节点类型1是标签 2是属性 3是文本
• nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
• nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容

节点的关系

• 父节点parentNode 和父级元素parentElement 同一个
• 子节点 childNodes 这个节点里面包含: 空格 换行 标签 文本
  • firstChild第一个子节点 在ie 678中是 第一个子元素
  • firstElementChild 第一个子元素 正常浏览器 在ie 678中是 不支持
  • lastChild 最后一个子节点 ，在ie 678中是 最后一个子元素
  • lastElementChild最后一个子元素， 在ie 678中是 不支持
• 与子节点对应的是 子元素 children

注意：如果使用childNodes子节点的时候，如果你要找到对应的元素，需要使用到nodeType == 1 这属性处理判断

• 兄弟节点(sibling)
  • 下一个兄弟节点
    • nextSibling 认识 下一个兄弟节点, 在ie 678中是 元素
    • nextElementSibling 其他浏览器 下一个兄弟元素 在ie 678中是 不支持
  • 上一个兄弟节点
    • previousSibling 上一个兄弟节点 在ie 678中是 元素
    • previousElementSibling 上一个兄弟元素 在ie 678中是 不支持

<script>
    var btn = document.getElementById("btn");
    //获取ul
    var oul = document.getElementById("uu");
    btn.onclick = function(){
        //获取子节点
        var nodes = oul.childNodes;
        var count = 0;
        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":"yellow");
                count++;
            }

        }
    }

</script>

image.png

我们了解到节点关系，那么在日常开发中有时我们还需要创建元素对象，那么怎么创建元素呢?

3种创建元素节点的方式

document.write("<p>这是一个p标签</p>");在文档中写入内容的方式

- 缺点: 在创建元素的时候，如果是在页面加载完毕后，通过这个创建的元素，那么页面上原来存在的内容全部被覆盖删除了

innerHTML创建元素内容

• 缺点:多次创建时，会覆盖原来的内容
• 例子,在div盒子里创建多个li

<script>
    var btn = document.getElementById("btn");
    var dv = document.getElementById("dv");
    var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
    btn.onclick = function(){
        var str = "<ul style='list-style-type: none;cursor: pointer'>"
        for(var i = 0; i < names.length; i ++){
            str += "<li>" + names[i] + "</li>";
        }
        str += "</ul>";

        dv.innerHTML = str;

        //添加事件

        var lists = dv.getElementsByTagName("li");

        for(var j = 0; j < lists.length; j ++){
            lists[j].onmouseover = function(){
                this.style.backgroundColor = "red";
            }
            lists[j].onmouseout = function(){
                this.style.backgroundColor = "";
            }
        }



    }

</script>

Untitled.gif

createElement(元素的名称) 创建元素节点

• 通常与之匹配的有appendChild(元素节点) 添加孩子 放到盒子的 最后面
• insertBefore(插入的节点，参照节点) 子节点 添加孩子 放在参照节点的前面
• removeChild() 删除孩子节点

<script>
 var btn = document.getElementById("btn");
    var dvObjc = document.getElementById("dv");

    btn.onclick = function(){
        //创建元素 返回的一个dom对象
        var pObjc = document.createElement("p");
        //给创建的元素设置 内容
        pObjc.innerText = "这是一个创建的p标签";
        //把创建的元素拼接到  拼接到最后
        dvObjc.appendChild(pObjc);
    }
    
</script>

创建元素节点.gif

• 动态创建表格

<script>
    var arr = [
        { name: "百度", href: "http://www.baidu.com" },
        { name: "谷歌", href: "http://www.google.com" },
        { name: "优酷", href: "http://www.youku.com" },
        { name: "土豆", href: "http://www.tudou.com" },
        { name: "快播", href: "http://www.kuaibo.com" },
        { name: "爱奇艺", href: "http://www.aiqiyi.com" }
    ];
    //获取按钮
    var btn = document.getElementById("btn");
    var dvObjc = document.getElementById("dv");
    //创建元素
    var tableObjc = document.createElement("table");
    tableObjc.border = "1px solid #cccccc";
    tableObjc.cellPadding = "0";
    tableObjc.cellSpacing = "0";
    //拼接
    dvObjc.appendChild(tableObjc);

    //点击创建
    btn.onclick = function(){
        for (var i = 0; i < arr.length; i++) {
        var jsonObj = arr[i];
        //创建tr
        var trObjc = document.createElement("tr");
       
        //创建td
        var tdObjc1 = document.createElement("td");
        tdObjc1.innerText = jsonObj["name"];
        trObjc.append(tdObjc1);
        var tdObjc2 = document.createElement("td");
        tdObjc2.innerHTML = "<a href="+jsonObj["href"]+">"+jsonObj["name"]+"</a>";
        trObjc.append(tdObjc2);

         //拼接
         tableObjc.append(trObjc);
    }

   

    }


</script>

Untitled.gif