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>

  • 相关阅读:
    手动安装vue-devtools
    redis随记
    JS时间格式化
    360自动抢票还不够,几行js代码设置无人值守
    HttpWebRequest请求返回非200的时候 HttpWebResponse怎么接受返回错误提示
    android发编译
    asprise-ocr-api-sample 高价收破解版64 32位
    (16)集合操作
    (15)字典操作
    (14)字符串
  • 原文地址:https://www.cnblogs.com/Bighua123/p/7634848.html
Copyright © 2011-2022 走看看