zoukankan      html  css  js  c++  java
  • js_DOM读写节点

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    //onload 页面加载事件,在页面加载完成后自动触发,触发时调用此匿名函数
    //alert(1);
    window.onload = function() {
    //alert(2);
    //1.读写节点
    //1.1读取节点的名称、类型
    var p1 = document.getElementById("p1");
    console.log(p1.nodeName);
    console.log(p1.nodeType)
    //1.2读写节点内容 双标签中间的文本叫内容<a>百度</a>
    //1)innerHTML(含子标签)
    console.log(p1.innerHTML);
    p1.innerHTML = "1.<u>读写</u>节点"
    //2)innerText(忽略子标签)
    var p2 = document.getElementById("p2");
    console.log(p2.innerText)
    p2.innerText = "2.<u>读写</u>节点"
    //1.3读写节点的值
    //表单控件中的数据叫值,只有表单控件才有值:input,select,textarea
    var b1 = document.getElementById("b1");
    console.log(b1.value);
    b1.value = "ANNIU";
    //1.4读写节点的属性
    //1)通过读写属性
    var img=document.getElementById("il");
    console.log(img.getAttribute("src"));
    img.setAttribute("src", "../images/02.jpg");
    //img.removeAttribute("src");
    //2)通过标准的属性名读写属性
    var p6=document.getElementById("p6");
    console.log(p6.style.color);
    //3)通过不标准属性名读写属性只有高版本浏览器支持

    }

    </script>
    </head>
    <body>
    <p id="p1">
    1.<b>读写</b>节点
    </p>
    <p id="p2">
    2.<b>查询</b>节点
    </p>
    <p id="p3">
    3.<b>增删</b>节点
    </p>
    <p>
    <input type="button" value="按钮" id="b1">
    </p>
    <p>
    <img src="../images/01.jpg" id="il">
    </p>
    <p id=p6 style="color: red">
    标准的属性就那么几个
    </p>
    </body>
    </html>

  • 相关阅读:
    Docker03-镜像
    Docker02:Centos7.6安装Docker
    Docker01-重要概念
    WEB开发新人指南
    Lpad()和Rpad()函数
    Unable to find the requested .Net Framework Data Provider. It may not be installed
    redis自动过期
    redis简单的读写
    redis的安装
    Ajax缓存,减少后台服务器压力
  • 原文地址:https://www.cnblogs.com/Bighua123/p/7634848.html
Copyright © 2011-2022 走看看