#夏日挑战赛#【FFH】鸿蒙Js API8之新增Dom的动态添加 原创 精华

本文正在参加星光计划3.0–夏日挑战赛

鸿蒙Js API8之新增Dom的动态添加

不久前鸿蒙js更新到了api8，看了一下官方文档关于API8的新增内容，发现了这样一个新增
https://developer.harmonyos.com/cn/docs/documentation/doc-releases/apidiff-js-api-8-arkui-0000001276484188

新增了dom的接口

static createElement(tag: string): Element

调用示例如下：

let image=dom.createElement('image') //静态调用
let input=dom.createElement('input')
image.setAttribute('src','/common/testImage.png')

viewmodel的Element接口新增三个关于Dom的操作

addChild(child: Element): void;
setAttribute(name: string, value: string): void;
setStyle(name: string, value: string): boolean;

实例演示

尝试添加image的dom

点击addImage生成image的dom

调用createElement(‘image’) ，返回Element

let image=dom.createElement(‘image’)

设置image的src属性

image.setAttribute(‘src’,‘/common/testImage.png’)

调用addChild(ELement)添加到指定组件下

this.$element(‘div2add’).addChild(image)

完整代码

<div class="container">
    <div style=" flex-direction: column; width: 612px;height: 240px;border-width: 2px;" id="div2add"></div>
    <button  class="btn" onclick="addImage">add</button>
</div>

export default {
    data: {
    },
    addImage() {
        let image=dom.createElement('image')
        image.setAttribute('src','/common/tesImage.png')
        this.$element('div2add').addChild(image)
    },
}

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.btn{
    margin-top: 50px;
    width: 45%;
    height: 10%;
    font-size: 55px;
}

相当于代替了js组件的show或if属性

<image show="{{isShow}}" src="/common/testImage.bmp"></image>

data:{
    isShow:false
}
addImage() {
    this.isShow = true
},

尝试添加input的dom

（因为设置不了text组件的显示内容，用input的text类型替代显示）

let input=dom.createElement('input')
input.setAttribute('value','this is a input text/this is a input text/this is a input text')
input.setAttribute('type','text') //设置成功
input.setStyle('font-size','50px') 
this.$element('div2add').addChild(input)

添加成功，但设置的font-size:50px样式没有生效

总结

Web框架中js对dom的操作是非常方便实用的，既然ArkUI是类Web框架的，对Dom树增加更多的操作接口是很有必要的，它能更大的提高开发效率。从新增的dom接口来看，这个方向也在逐渐的建立和完善，希望接下来的js API版本更新能给ArkUI前端开发带来更多的惊喜和便利。

期待完善的功能

目前createElement生成的dom貌似设置不了自身style，但能通过在其父组件中设置子组件样式来改变
尝试新增的setStyle()接口：

Sets a style value on a specified element. If the style exists and the style value is valid, the setting is successful. Otherwise, the setting is invalid.
@param name style name
@param value style value
@returns If the setting is successful, true is returned. If the setting fails, false is returned.
@since 8
setStyle(name: string, value: string): boolean;

let div=this.$element('div2add')
let bool = div.setStyle('border-width','0px')
console.info(bool) //文档写的是返回boolean，但输出undefined，设置没有生效，不知道是不是我使用方法不对