首页 > 云开发 > JavaScript > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

Javascript DOM1

JavaScript

1. DOM简介
DOM 节点分类 DOM 节点层级关系
1、文档节点 1、父节点
2、标签(元素)节点 2、子节点
3、属性节点 3、兄弟节点
4、注释节点 4、根节点
5、文本节点
DOM节点分类

DOM节点关系

2. 获取元素

通过id获取元素

// document本身是window的属性 但window是可以省略不学的
// window.document.getElementById()
var divID = document.getElementById("divID")

通过class获取元素(标签)节点

// 返回值 集合类型(数组类型)
var divClassArr = document.getElementsByClassName('divClass');
for(var i = 0; i < divClassArr.length; i++){
    console.log(divClassArr[i]);
}

通过tag获取元素

var divTagArr = document.getElementsByTagName('div');

通过name属性获取元素

var nameArr = document.getElementsByName('a')

3. 获取属性节点
<script type="text/javascript">
    //通过id获取input标签
    var myInput = document.getElementById("inputID")

    // 获取属性节点
    // 方式一 标签节点.属性点
    console.log(myInput.type)   // text
    console.log(myInput.placeholder);

    // 修改属性节点
    // 标签节点.属性名 = 新的属性值
    myInput.placeholder = '嘿嘿'


    // 方式二
    // 获取属性节点  标签节点.getAttribute(属性名称)
    var inPl = myInput.getAttribute('type');

    // 修改属性节点
    // 标签节点 : setAttribute(属性名称,新的属性值)
    myInput.setAttribute('placeholder', '666');

    // 删除属性节点
    myInput.removeAttribute('placeholder')
</script>
4. 内部节点与外部节点属性
<script type="text/javascript">
    // 获取div1节点
    var div1 = document.getElementById("div1")
    
    // 1、innerHTML:获取元素节点
    //从对象的开始标签到结束标签的全部内容,不包括本身Html标签
    var innerDiv = div1.innerHTML;
    
    //2、元素节点.outerHTML
    //除了包含innerHTML的全部内容外, 还包含对象标签本身
    var outerDiv = div1.outerHTML;
    
    //3、元素节点.innerText
    //从对象的开始标签到结束标签的全部的文本内容
    var innerText = div1.innerText;
    
    //4、修改元素节点
    div1.innerHTML = '<h1>666</h1>';
</script>
5. 行间样式的获取 css对应的style属性

<div id="div1" style="width: 150px;height: 150px;background-color: red;"></div>
<button onclick="changeColor()">换颜色</button>
<script type="text/javascript">
    var div1 = document.getElementById("div1");
    console.log(div1);    
    var divArr = document.getElementsByTagName('div');
    console.log(divArr);  // [object HTMLCollection]
    console.log(divArr[0]); // [object HTMLDivElement]

    // 通过标签节点获取style属性的值
    var styleDiv = div1.style

    // 获取style属性下面的样式值 width
    var width = div1.style.width;

    // 修改背景颜色
    div1.style.backgroundColor = 'green';

    // 按钮 点击一次按钮更换一次div的背景颜色

    function changeColor() {
    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    var colorStr = "rgb(" + r + ", " + g + ", " + b + ")";
    div1.style.backgroundColor = colorStr;
    }

</script>

Javascript DOM2

文章来源:segmentfault,作者:rottengeek。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

本文标签

javascript

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索