JavaScript高级程序成绩（第四版）笔记 DOM-Document类型定位元素文档写入

最新推荐文章于 2022-11-03 18:17:55 发布

Silent_crab

最新推荐文章于 2022-11-03 18:17:55 发布

阅读量211

点赞数

分类专栏：前端 JavaScript 文章标签： javascript dom

本文链接：https://blog.csdn.net/Silent_crab/article/details/119787271

版权

前端同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div  id="id1">
      <h1  id="id4">123</h1>
        <script type="text/javascript">
            document.write("<strong>"+(new Date()).toString()+"</strong>");
        </script>
    </div>
    <div id="id2">
      <h1 style="color:red">标题</h1>
      <h1>标题</h1>
        <img name="name1" src="img1.jpg" width="200" height="200">
        <a href="index.html">链接</a>
        <a href="js01Bom.html" name="nameA">链接2</a>


    </div>
    <div id="id3">
        <fieldset>
            <legend>Which color do you prefer?</legend>
             <ul>
            <li>
                <input type="radio" value="red" name="color" id="colorRed">
                <label for="colorRed">Red</label>
            </li>
            <li>
                <input type="radio" value="green" name="color" id="colorGreen">
                <label for="colorGreen">Green</label>
            </li>
            <li>
                <input type="radio" value="blue" name="color" id="ColorBlue">
                <label for="ColorBlue">Blue</label>
            </li>
        </ul>
        </fieldset>

    </div>
<!--
<script type="text/javascript">
    window.onload = function(){
        document.write("Hello world");
    }
</script>
-->
</body>
<script src="js04Document.js"></script>
</html>

//定位元素
//document.getElementById()  document.getElementByTagName()

let element1 = document.getElementById('id1');
console.log(element1.nodeName);//div

let listElement= document.getElementsByTagName('h1');
console.log(listElement);//HTMLCollection(3)[h1#id4, h1, h1, id4: h1#id4]

console.log(listElement[1].style.color);

//namedItem 通过标签的name属性获得某一项的引用
let ImgName = document.images.namedItem('name1');
console.log(ImgName);
//中括号获取
let imgName2= document.images['name1'];
console.log(imgName2);

//获得所有元素，传入*
console.log(document.getElementsByTagName("*"));
//HTMLCollection(13)[html, head, meta, title, body, div#id1, h1#id4, div#id2, h1, h1, img, div#id3, script, id1: div#id1, id4: h1#id4, id2: div#id2, name1: img, id3: div#id3]

//getElementByName,常用在单选按钮
let radios =document.getElementsByName('color');
console.log(radios);

//特殊集合
console.log(document.anchors);//包含文档中所有带name的<a>元素
console.log(document.applets)//已废弃，规定java applet的文件名
console.log(document.forms);//所有form元素
console.log(document.images);//img元素
console.log(document.links);//包含文档中所有带href属性的<a>元素

let hasCore = document.implementation.hasFeature('Core',"1.0");//true
let hasEvent = document.implementation.hasFeature("Events","4.0")
console.log(hasCore,hasEvent);
//implementation.hasFeature 无论写什么都是true ,已废弃

//文档写入
//write writeln()
document.write('abc');
document.writeln('abcd');

又写了个用document.createElement()插入图片的练习

let newElementImg = document.createElement('img');
newElementImg.src='img1.jpg';
newElementImg.id='id3';
newElementImg.width=200;
newElementImg.height=200;
let newElementDiv = document.createElement('div');
newElementDiv.id='id4';
document.body.appendChild(newElementDiv);
newElementDiv.appendChild(newElementImg);

Silent_crab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级程序成绩（第四版）笔记 DOM-Document类型定位元素文档写入

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="id1"> <h1 id="id4">123</h1> <script type="text/jav.
复制链接

扫一扫