第2章 DOM节点的创建
本文最后更新于 1291 天前,其中的信息可能已经有所发展或是发生改变。

1. DOM创建节点及节点属性

通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了。

试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了

本文向大家介绍一下如何使用JavaScript创建div节点元素,主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容,相信本文介绍一定会让你有所收获。

先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题)

创建流程比较简单,大体如下:

  1. 创建节点(常见的:元素、属性和文本)
  2. 添加节点的一些属性
  3. 加入到文档中

流程中涉及的一点方法:

  • 创建元素:document.createElement
  • 设置属性:setAttribute
  • 添加文本:innerHTML
  • 加入文档:appendChild

如下边代码所示,写一个最简单的元素创建,我们会发现几个问题:

  1. 每一个元素节点都必须单独创建
  2. 节点是属性需要单独设置,而且设置的接口不是很统一
  3. 添加到指定的元素位置不灵活
  4. 最后还有一个最重要的:浏览器兼容问题处理

针对这一系列的DOM操作的问题,jQuery给出了一套非常完美的接口方法,我们之后就开始深入学习

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }
    
    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left div {
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    </style>
</head>
<body>
    <h2>动态创建元素节点</h2>
    <div class="left">
        <div class="aaron">点击body区域会动态创建元素节点</div>
    </div>
    <script type="text/javascript">
        var body = document.querySelector('body');

        document.addEventListener('click',function(){
            
            //创建2个div元素
            var rightdiv = document.createElement('div')
            var rightaaron = document.createElement("div");

            //给2个div设置不同的属性
            rightdiv.setAttribute('class', 'right')
            rightaaron.className = 'aaron'
            rightaaron.innerHTML = "动态创建DIV元素节点";

            //2个div合并成包含关系
            rightdiv.appendChild(rightaaron)
            
            //绘制到页面body
            body.appendChild(rightdiv)

        },false)
    </script>
</body>
</html>

问题扩展:

1、关于源码中事件的问题。

true 与 false 之间的区别。

document.addEventListener("click",function(){
    console.log(1)
},true)

document.addEventListener("click",function(){
    console.log(1)
},false)

addEventListener() 方法

定义与用法
document.addEventListener() 方法用于向文档添加事件句柄。

提示: 可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

语法

document.addEventListener(event, function, useCapture)

参数值

参数 描述
event 必需。描述事件名称的字符串。
注意: 不要使用 "on" 前缀。例如,使用 "click" 来取代 "onclick"。
提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册
function 必需。描述了事件触发后执行的函数。
当事件触发时,事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值,指定事件是否 在捕获或冒泡阶段执行。
可能值:
* true – 事件句柄在捕获阶段执行
* false- 默认。事件句柄在冒泡阶段执行

2、setAttribute 方法与 className 方法给属性添加 class 的区别。

setAttribute()

设置指定元素上的某个属性值。如果属性已经存在,则 更新(覆盖)该值 ;否则,使用指定的名称和值添加一个新的属性。
要获取某个属性当前的值,可使用 getAttribute();要删除某个属性,可使用 removeAttribute();要获取该自定义属性的属性值,可以使用getAttribute();

语法:

element.setAttribute(name,value)

属性说明:
name——表示属性名称的字符串。
value——属性的值/新值。

className

className 属性设置或返回元素的 class 属性(如果已经有了 class 值,会进行覆盖)。

语法:
获取属性值:

HTMLElementObject.className

设置属性值:

HTMLElementObject.className=classname

2. jQuery节点创建与属性的处理

上一节介绍了通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程

创建元素节点

可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构")

$("<div></div>")

创建为本节点

与创建元素节点类似,可以直接把文本内容一并描述

$("<div>我是文本节点</div>")

创建为属性节点

与创建元素节点同样的方式

$("<div id='test' class='aaron'>我是文本节点</div>")

我们通过jQuery把上一届的代码改造一下,如右边代码所示

一条一句就搞定了,跟写HTML结构方式是一样的

$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

这就是jQuery创建节点的方式,让我们保留HTML的结构书写方式,非常的简单、方便和灵活

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }
    
    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left div {
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    </style>
</head>
<body>
    <h2>动态创建元素节点</h2>
    <button>点击通过jQuery动态创建元素节点</button>
    <script type="text/javascript">
    var $body = $('body');
    $body.on('click', function() {
        //通过jQuery生成div元素节点
        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
        $body.append(div)
    })
    </script>
</body>
</html>
标题:第2章 DOM节点的创建
地址:https://xiaodongxier.com/88.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇