zoukankan      html  css  js  c++  java

  • JavaScript学习笔记——DOM基础 2.5

    一、document.write方法

    document对象write()方法，常用来向网页中输出字符串，圆括号中可以是要输出的字符串，

    document.write('这是我的个人博客');

    也可以是字符串变量，

    var myText = '这是我的个人博客';
document.write(myText);

    还有一种，就是通过字符串和变量组合的方式进行输出。

    var myText = '这是我的';
document.write(myText + '个人博客');

    document.write还可以应用到函数中，不过我需要在HTML中调用这个函数才能执行。

    二、innerHTML属性

    innerHTML属性用来读、写指定元素里的HTML内容。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
window.onload = function(){
    var myBlogContent = document.getElementById('myBlog');
    alert(myBlogContent.innerHTML);
}
</script>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>

    上面这个实例会出现对话框，并显示<ul>标签及里面的内容；而下面这个实例则会替换掉原先显示的内容，在页面中出现“我的博客分类”。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
window.onload = function(){
    var myBlogContent = document.getElementById('myBlog');
    myBlogContent.innerHTML = '我的博客分类';
}
</script>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>

     三、creatElement方法

    语法：document.createElement(nodeName);

    window.onload = function(){
    var para = document.createElement('p');
    var info = 'nodeName: '; 
    info += para.nodeName;
    info += ' nodeType: '; 
    info += para.nodeType;
    alert(info);
}

    用途很明显，可以创建新的标签元素。

    四、appendChild方法

    语法：parent.appendChild(child);

    用途：将新创建的标签元素child插入到DOM节点树的某个parent节点中。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
window.onload = function(){
    var myDiv = document.getElementById('myBlog');
    var para = document.createElement('p');
    para.innerHTML = '分类';
    myDiv.appendChild(para);
}
</script>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>

    为了让结果显而易见，我使用innerHTML属性。

    五、ceateTextNode方法

    语法：document.ceateTextNode(text);

    用途：创建文本节点

    下面这个实例与上面的结果相同，但是实现方法有些不同，我更倾向于下面这种方法。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
window.onload = function(){
    var myDiv = document.getElementById('myBlog');
    var para = document.createElement('p');
    var txt = document.createTextNode('分类');
    para.appendChild(txt);
    myDiv.appendChild(para);
}
</script>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>

     六、insertBefore方法

    语法：parrentElement.insertBefore(newElement,targetElement);

    作用：将一个新元素插入在现有的目标元素的前面；

    注意：这个方法的作用对象是目标元素的父级元素。

    在上面这个实例中，虽然实现了插入新元素的效果，但是并没有达到预期的效果，通过insertBefore方法可以解决这个问题。

    思路：需要设定新元素，可以通过createElement方法实现；如果这个元素中有子元素，譬如有文本元素，可以通过createTextNode方法实现；通过appendChild将文本元素添加到其父级元素中（就是设定的新元素，同时也是我需要添加到指定位置的元素）；找到目标元素及其父级元素，通过insertBefore方法去实现我的最终目的。

    经过测试可以看出来，下面这个实例与上面的展示效果有一些不同之处，没错，是位置发生了变化，而下面的效果才是我想要的。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
window.onload = function(){
    var myUl = document.getElementsByTagName('ul')[0];
    var myDiv = document.getElementById('myBlog');
    var para = document.createElement('p');
    var txt = document.createTextNode('分类');
    para.appendChild(txt);
    myDiv.insertBefore(para,myUl);
}
</script>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>

    七、自定义insertAfter方法

    与insertBefore方法对照，JavaScript并没有提供insertAfter方法，需要自定义这个方法。

    与insertBefore方法相同，需要先设定一个新元素（newElement），也就是将要插入的元素，紧接着要知道往哪个元素（也就是目标元素targetElement）的后面插入，这样我们可以得出，insertAfter方法需要设定两个参数。

    如果targetElement是其父级元素的最后一个子元素，根据堆栈工作原理和HTML渲染原理，可以通过appendChild方法来插入新元素newElement。

    如果不是最后一个子元素，则可以通过insertBefore方法插入到targetElement的下一个同级元素之前，这样就等同于插入在targetElement之后。

    两个如果可以通过if-else语句连接，最后整合出insertAfter方法。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}
window.onload = function(){
var myPara = document.getElementById('myPara');
var newPara = document.createElement('p');
var txt = document.createTextNode('This is my blog.');
newPara.appendChild(txt);
insertAfter(newPara,myPara);
}
</script>
</head>
<body>
<h1>筱雨生</h1>
<p id="myPara">時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
  <ul>
    <li title="JavaScript">JavaScript</li>
    <li title="HTML">HTML</li>
    <li title="CSS">CSS</li>
    <li title="我的随笔">我的随笔</li>
    <li></li>
  </ul>
</div>
</body>
</html>

    需要特别注意的是，在insertAfter方法设定好进行应用时，需要绑定onload事件，否则你会出现意外的收获, -_-~

    八、题外话

    学而时习之，不亦说乎？
  • 相关阅读:
    关闭编辑easyui datagrid table
    sql 保留两位小数+四舍五入
    easyui DataGrid 工具类之 util js
    easyui DataGrid 工具类之 后台生成列
    easyui DataGrid 工具类之 WorkbookUtil class
    easyui DataGrid 工具类之 TableUtil class
    easyui DataGrid 工具类之 Utils class
    easyui DataGrid 工具类之 列属性class
    oracle 卸载
    “云时代架构”经典文章阅读感想七
  • 原文地址：https://www.cnblogs.com/yushengxiao/p/4730237.html
Copyright © 2011-2022 走看看