JavaScript中HTML的DOM

电玩女神 2021-12-15 08:11 292阅读 0赞

**JavaScript中HTML的DOM**

1.1DOM简介

![1642540-20190511142442190-2051854516.png][]

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 οnclick="this.innerHTML='谢谢！'">请点击该文本</h1>
     *  Element.οnclick=function()\{displayDate()\};
     *  Element.addEventListener("click",function()\{ 
     *  \});　　　
     *      <body>
                <div id="main" οnclick="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>

转载于:https://www.cnblogs.com/yangHS/p/10848802.html

[1642540-20190511142442190-2051854516.png]: /images/20211214/92d1817c571f4a2293dbb9947af924c3.png