JavaScript中HTML的DOM

JavaScript中HTML的DOM

1.1DOM简介

1.2获得元素

　　document.getElementById()
　　document.getElementByTagName()
　　document.getElementByClassName()

    <div id="intro"></div>
    <div id="main">
        <p>My Name</p>
    </div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>

    <script type="text/javascript">
        var intro = document.getElementById("intro");
        var main = document.getElementById("main");
        var p = main.getElementsByTagName("p")[0];
        var content1 = document.getElementsByClassName("content")[0];

    </script>

2.DOM-HTML

　　2.1修改HTML内容

　　　　document.getElementById(id).innerHTML='HelloWorld';

　　2.2修改HTML属性

- element.getAttribute()
- element.setAttribute()
- element.src
- element.href

<body>
    <div id="main" data="first">123</div>
    <img id="image" src="1.png">
    <a  id="goUrl" href=""/>1
<script type="text/javascript">
    var main = document.getElementById('main');
    main.innerHTML = 'HelloWorld';
    alert(main.getAttribute('data'));
    main.setAttribute('data','second');

    var image = document.getElementById('image');
    image.src='2.png';

    var goUrl = document.getElementById('goUrl');
    goUrl.href='https://www.baidu.com';
    
</script>
</body>

3.DOM-CSS

　　3.1修改样式

- document.getElementById(' ').style.color=' ';

4.DOM事件　

<h1 onclick="this.innerHTML='谢谢！'">请点击该文本</h1>
Element.onclick=function(){displayDate()};
Element.addEventListener("click",function(){
});

<body>
    <div id="main" onclick="this.innerHTML='wow!!'">hello</div>
    <div id="nav">world</div>
    <div id="boo">!</div>

<script type="text/javascript">
    var nav = document.getElementById('nav');
    nav.onclick = function () {
        alert('world');
    }
    var boo = document.getElementById('boo');
    boo.addEventListener('click',function () {
       alert('!');
    });
</script>
</body>

5.DOM节点

　　　5.1添加删除节点

- document.createElement("p");
- document.createTextNode("新增")
- parent.appendChild(child);
- parent.removeChild(child);

<body>
    <div id="div1">
        <p>hello</p>
        <p>world</p>
    </div>
<script type="text/javascript">
    var div1 = document.getElementById('div1');
    var p = document.createElement('p');//<p></p>
    var nono = document.createTextNode('nono');//nono
    var _p = p.appendChild(nono);//<p>nono</p>
    div1.appendChild(_p);
    div1.removeChild(_p);
</script>
</body>

JavaScript中HTML的DOM

猜你喜欢